rem 苏宁移动端案例

效果:

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><title>Document</title>
</head><body><div class="search-content"><a href="" class="classify"></a><div class="search"><form><input type="search" value="厨卫保暖季 哒哒哒"></form></div><a href="" class="login">登录</a></div><div class="banner"><img src="upload/banner.gif" alt=""></div><!-- 广告部分 --><div class="ad clearfix"><a href="#"><img src="upload/ad1.gif" alt=""></a><a href="#"><img src="upload/ad2.gif" alt=""></a><a href="#"><img src="upload/ad3.gif" alt=""></a></div><nav class="clearfix"><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>爆款手机</span></a><div class="clear"></div></nav>
<footer><a href="#"><img src="https://image1.suning.cn/uimg/cms/img/157543979328589256.png?from=mobile"><span>购物车</span></a><a href="#"><img src="https://image1.suning.cn/uimg/cms/img/157543979328589256.png?from=mobile"><span>购物车</span></a><a href="#"><img src="https://image1.suning.cn/uimg/cms/img/157543979328589256.png?from=mobile"><span>购物车</span></a><a href="#"><img src="https://image1.suning.cn/uimg/cms/img/157543979328589256.png?from=mobile"><span>购物车</span></a><a href="#"><img src="https://image1.suning.cn/uimg/cms/img/157543979328589256.png?from=mobile"><span>购物车</span></a></footer>
</body></html>

index.less

@import 'common';
body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family:Arial,Helvetica;background:#F2F2F2;
}
@baseFont: 50;
.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 15rem;height: (88rem / @baseFont);background-color:#FFC001;.search{flex:1;input{border-radius: (33rem/@baseFont);margin-top: (12rem/@baseFont);font-size: (25rem/@baseFont);padding-left: (55rem/@baseFont);color: #999999;width: 100%;height: (66rem/@baseFont);}}.login {width: (75rem / @baseFont);height:( 70rem / @baseFont);line-height: (70rem / @baseFont);margin: (10rem / @baseFont);font-size:( 25rem / @baseFont);text-align: center;color: #fff;}}.classify{width:( 44rem / @baseFont);height: (70rem / @baseFont);margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);background: url(../images/classify.png);background-size:( 44rem / @baseFont) (70rem / @baseFont);}.banner {width: (750rem / @baseFont);height: (368rem / @baseFont);img {width: 100%;height: 100%;}}.ad{display: flex;width: (750rem / @baseFont);height: (218rem / @baseFont);img{flex:1;width:100%;height: 100%;}
}
nav{width: (750rem/@baseFont);background-color: skyblue;margin-bottom:1.76rem;a{float: left;width: (150rem/@baseFont);height: (160rem/@baseFont);text-align: center;img {display: block;width: (82rem / @baseFont);height: (82rem / @baseFont);margin: (10rem / @baseFont) auto 0;}span {font-size:( 25rem / @baseFont);color: #333;}}.clear{clear:both;}
}
footer{display:flex;position: fixed;bottom: 0px;height: (88rem / @baseFont);background-color:#FFC001;a{ display:flex;float: left;flex:1;text-align: center;width: 3rem;flex-direction: column;img{display: block;width: (62rem / @baseFont);height: (62rem / @baseFont);margin: (5rem / @baseFont) auto 0;}span {font-size:( 10rem / @baseFont);color: #333;}
}}

rem 苏宁移动端案例相关推荐

rem适配布局制作苏宁移动端首页
实现效果: 可以看到随着我们屏幕尺寸的不断变化,我们制作的移动端页面也能有一个自适应的效果,这就是rem适配布局的好处这里我们主要是体现一个rem适配布局所以剩下的部分以同样方法搭建 1.技术选型 ...
rem布局 html,移动端h5之rem布局／px2rem
rem布局之媒体匹配最早的时候用的rem适配方法,通过手动设置媒体查询对不同设备进行设置font-size // 自适应 // ------------------------ html{ font ...
webpack转内联px为rem_Vuejs项目配置webpack将px自动转化为rem，适配移动端
本项目采用 iPhone 6 物理像素为 750px * 1334px 的设计稿 rem兼容性先看看rem的兼容性,关于移动端 ios:6.1系统以上都支持 android:2.1系统以上都支持大 ...
浅谈css3长度单位rem，以及移动端布局技巧
rem是什么? rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位.root!!!!!!!!!根节点,也就是 ...
CSS———移动端案例分享（美图公司首页）
文章目录前言一.结构分析二.实现步骤 1.HTML结构 2.CSS样式总结前言前文我们讲述了移动端的相关知识点,有朋友评论让我赶紧更新,这不移动端的案例分享就来了,请看下文: 一.结构分析 ...
爬虫Scrapy框架学习（三）-爬取苏宁图书信息案例
爬取苏宁图书案例 1.项目文件架构 2.爬取数据网页页面 3.suning.py文件 # -*- coding: utf-8 -*- import scrapy from copy import de ...
cli3 px转rem适配移动端_Vue:将px转化为rem，适配移动端
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
基于vue-cli配置手淘的lib-flexible + rem，实现移动端自适应
没接触过flexible的建议先看看大漠的这篇文章这样你才会知道长度为什么用rem,而字体要用px 安装flexible npm install lib-flexible --save 引入flexi ...
vue项目中px转rem方法（pc端）
首先安装这两个插件 npm install postcss-px2rem-excludenpm install postcss-px2remnpm install px2rem-loader 安装好了 ...

rem 苏宁移动端案例

rem 苏宁移动端案例相关推荐

最新文章

热门文章