方案1:rem+less+媒体查询

跟其他页面不同的文件，需要新建common.less文件
用媒体查询设置不同的html字体大小因为除了首页其他页面也要
尺寸为 320px 360px 375px 400px 414px 424px 480px 540px 720px 750px
划分份数为15等份
因为pc端也可以打开所以需要设置默认html字体大小为50px 必须写到最上面
在新建的index.less
把设置好的 common.less 引入到 index.less中

语法

@import "文件名";

html

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><title>苏宁易购(Suning.com)-送货更准时、价格更超值、上新货更快</title>
</head><body><!-- 跟其他页面不同的文件，需要新建common.less文件用媒体查询设置不同的html字体大小 因为除了首页其他页面也要尺寸为 320px 360px 375px 400px 414px 424px 480px 540px 720px 750px划分份数为15等份因为pc端也可以打开 所以需要设置默认html字体大小为50px 必须写到最上面新的思路新建的index.less 把设置好的 common.less 引入到 index.less中语法@import "文件名";引入文件--><!-- 顶部搜索框 --><div class="search_content"><div class="search_nav"><a href="#"><img src="data:images/157199320847433454.png"></a><a href="#"><img src="upload/161666500166438283.gif"></a><a href="#"><img src="data:images/157199321817918653.png"></a></div><div class="search_text"><div class="icon"></div><a href="#">超级会员日 爆款5折起</a></div></div><!-- 轮播图 --><div class="banner"><ul><img src="upload/161666502110611755.jpg"></ul></div><!-- nav模块 --><nav><a href="#"><img src="data:images/1.png"><div class="nav_title">苏宁秒杀</div></a><a href="#"><img src="data:images/2.png"><div class="nav_title">苏宁超市</div></a><a href="#"><img src="data:images/3.png"><div class="nav_title">苏宁拼购</div></a><a href="#"><img src="data:images/4.png"><div class="nav_title">手机数码</div></a><a href="#"><img src="data:images/5.png"><div class="nav_title">苏宁家电</div></a><a href="#"><img src="data:images/6.png"><div class="nav_title">免费水果</div></a><a href="#"><img src="data:images/7.png"><div class="nav_title">super会员</div></a><a href="#"><img src="data:images/8.png"><div class="nav_title">签到有礼</div></a><a href="#"><img src="data:images/9.png"><div class="nav_title">领券中心</div></a><a href="#"><img src="data:images/10.png"><div class="nav_title">更多频道</div></a></nav>
</body></html>

common.less

html{font-size: 50px;
}@media screen and (min-width:320px){html{font-size: (320px / 15);}
}
@media screen and (min-width:360px){html{font-size: (360px / 15);}
}
@media screen and (min-width:375px){html{font-size: (375px / 15);}
}
@media screen and (min-width:384px){html{font-size: (384px / 15);}
}
@media screen and (min-width:400px){html{font-size: (400px / 15);}
}
@media screen and (min-width:414px){html{font-size: (414px / 15);}
}
@media screen and (min-width:424px){html{font-size: (424px / 15);}
}
@media screen and (min-width:480px){html{font-size: (480px / 15);}
}
@media screen and (min-width:540px){html{font-size: (540px / 15);}
}
@media screen and (min-width:720px){html{font-size: (720px / 15);}
}
@media screen and (min-width:750px){html{font-size: (750px / 15);}
}

index.less

@import "common.less";
@htf:50rem;body{min-width:320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background-color: #f7f7f7;
}a{text-decoration: none;
}.search_content{width: 15rem;height: (180/@htf);background-color: #FFDB47;.search_nav{display: flex;position: relative;width: 15rem;height: (88/@htf);a{&:nth-child(1){position: absolute;top: (15/@htf);left: (30/@htf);display: block;width:(36/@htf);height: (60/@htf);img{width:(36/@htf);height: (60/@htf);}}&:nth-child(2){position: absolute;top: (8/@htf);left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);flex: 1;img{width:(320/@htf);height: (64/@htf);}}&:nth-child(3){position: absolute;top: (15/@htf);right: (30/@htf);display: block;width:(36/@htf);height: (60/@htf);img{width:(36/@htf);height: (60/@htf);}}}}.search_text{display: flex;position: relative;margin-top: (10/@htf);left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 14rem;height: (88/@htf) * 0.8;background-color: #fff;border-radius: (50/@htf);.icon{position: absolute;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);left: (20/@htf);width: (36/@htf);height: (36/@htf);background: url(../images/下载.png) no-repeat;background-size: (36/@htf) (36/@htf);}a{position: absolute;top: 50%;transform: translateY(-50%);left: (70/@htf);display: block;color: #999;font-size: .56rem;}}
}.banner{width: 15rem;height: (229/@htf);background:url("../images/161243731909884312.png") no-repeat;background-size: 15rem (229/@htf);overflow: hidden;ul{position: relative;margin: 0;padding: 0;left: 50%;top:0;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 14rem;height: (229/@htf);border-radius: (25/@htf);background-color: #fff;overflow: hidden;img{position: relative;top: -(139/@htf);width: 100%;height: (368/@htf);}}
}nav{width: 15rem;height: (308/@htf);a{position: relative;float: left;box-sizing: border-box;display: block;width: (15rem/5);height: (154/@htf);img{position: absolute;top: 20%;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: (84/@htf);height: (84/@htf);}.nav_title{width: (15rem/5);text-align: center;color: #666;font-size: .44rem;line-height: (270/@htf);}}
}

方案2:flexible.js+rem

手机淘宝团队出的简洁高效移动端适配库
我们不需要写不同屏幕的媒体查询因为里面做了js处理
他的原理是吧当前设备划分为10等份但是不同设备下比例还是一致的
团队操作时只需要确定html文字大小即可
比如设计稿是750px html文字大小设置为 75px即可
里面页面元素的rem值页面元素的px值/75
剩下的让flexible.js 计算

小插件

px转换rem插件 cssrem
这个插件的默认html文字大小 cssroot为 16px

小问题

这个js文件是根据屏幕划分的超过750px依然会划分改变font-size
所以我们需要一个限定页面不会超过750px

 @media screen and (min-width:750px){html{font-size: 75px!important;}
}

因为js内的权重高于css的权重所以需要在限定中加入提权的!important;

或者可以设置

html{max-width:750px;
}

不过这个样式效果比较差所以最好别这么设置

html

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><!-- 引入js文件 --><script src="js/index.js"></script><title>苏宁易购(Suning.com)-送货更准时、价格更超值、上新货更快</title>
</head><body><!-- 引入js文件<script src="js/index.js"></script>px转换rem插件 cssrem这个插件的默认html文字大小 cssroot为 16px这个js文件是根据屏幕划分的 超过750px依然会划分改变font-size所以我们需要一个限定 页面不会超过750px@media screen and (min-width:750px){html{font-size: 75px!important;}因为js内的权重高于css的权重 所以需要在限定中加入提权的!important;或者可以设置html{max-width:750px;}不过这个样式效果比较差 所以最好别这么设置有个问题要注意flexible.js已经不维护了因为浏览器对于viewport支持已经非常好了 所以个人偏向于第一种 rem+less 方案--><!-- 顶部搜索框 --><div class="search_content"><div class="search_nav"><a href="#"><img src="data:images/157199320847433454.png"></a><a href="#"><img src="upload/161666500166438283.gif"></a><a href="#"><img src="data:images/157199321817918653.png"></a></div><div class="search_text"><div class="icon"></div><a href="#">超级会员日 爆款5折起</a></div></div><!-- 轮播图 --><div class="banner"><ul><img src="upload/161666502110611755.jpg"></ul></div><!-- nav模块 --><nav><a href="#"><img src="data:images/1.png"><div class="nav_title">苏宁秒杀</div></a><a href="#"><img src="data:images/2.png"><div class="nav_title">苏宁超市</div></a><a href="#"><img src="data:images/3.png"><div class="nav_title">苏宁拼购</div></a><a href="#"><img src="data:images/4.png"><div class="nav_title">手机数码</div></a><a href="#"><img src="data:images/5.png"><div class="nav_title">苏宁家电</div></a><a href="#"><img src="data:images/6.png"><div class="nav_title">免费水果</div></a><a href="#"><img src="data:images/7.png"><div class="nav_title">super会员</div></a><a href="#"><img src="data:images/8.png"><div class="nav_title">签到有礼</div></a><a href="#"><img src="data:images/9.png"><div class="nav_title">领券中心</div></a><a href="#"><img src="data:images/10.png"><div class="nav_title">更多频道</div></a></nav>
</body></html>

index.less

@htf:75rem;@media screen and (min-width:750px){html{font-size: 75px!important;}
}
// html{//     max-width: 750px;
// }body{min-width: 320px;max-width: 750px;width: 10rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background-color: #f7f7f7;
}a{text-decoration: none;
}.search_content{width: 10rem;height: (180/@htf);background-color: #FFDB47;.search_nav{display: flex;position: relative;width: 10rem;height: (88/@htf);a{&:nth-child(1){position: absolute;top: (15/@htf);left: (30/@htf);display: block;width:(36/@htf);height: (60/@htf);img{width:(36/@htf);height: (60/@htf);}}&:nth-child(2){position: absolute;top: (8/@htf);left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);flex: 1;img{width:(320/@htf);height: (64/@htf);}}&:nth-child(3){position: absolute;top: (15/@htf);right: (30/@htf);display: block;width:(36/@htf);height: (60/@htf);img{width:(36/@htf);height: (60/@htf);}}}}.search_text{display: flex;position: relative;margin-top: (10/@htf);left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 9rem;height: (88/@htf) * 0.8;background-color: #fff;border-radius: (50/@htf);.icon{position: absolute;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);left: (20/@htf);width: (36/@htf);height: (36/@htf);background: url(../images/下载.png) no-repeat;background-size: (36/@htf) (36/@htf);}a{position: absolute;top: 50%;transform: translateY(-50%);left: (70/@htf);display: block;color: #999;font-size: .35rem;}}
}.banner{width: 10rem;height: (229/@htf);background:url("../images/161243731909884312.png") no-repeat;background-size: 15rem (229/@htf);overflow: hidden;ul{position: relative;margin: 0;padding: 0;left: 50%;top:0;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 9rem;height: (229/@htf);border-radius: (25/@htf);background-color: #fff;overflow: hidden;img{position: relative;top: -(139/@htf);width: 100%;height: (368/@htf);}}
}nav{width: 10rem;height: (308/@htf);a{position: relative;float: left;box-sizing: border-box;display: block;width: (10rem/5);height: (154/@htf);img{position: absolute;top: 20%;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: (84/@htf);height: (84/@htf);}.nav_title{width: (10rem/5);text-align: center;color: #666;font-size: .3rem;line-height: (270/@htf);}}
}

flexible.js

(function flexible (window, document) {var docEl = document.documentElementvar dpr = window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize () {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'}else {document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit () {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resizewindow.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))

使用两种rem布局方案-实现静态苏宁易购移动端首页相关推荐

459~486（rem+媒体查询+Less+苏宁易购移动端首页）
1 rem基础 rem单位 rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-si ...
9月1日-9月3日（移动web开发——rem适配布局、苏宁易购移动端首页制作）
目录一. rem单位二.媒体查询 2.1 价值 2.2 语法规范
从两则新闻看苏宁易购的架构设计
苏宁易购与网宿科技达成合作,技术优势或成电子商务竞争关键日前,苏宁电器正式对外发布2011年3季度季报,其旗下的电子商务平台苏宁易购业绩斐然,仅2011年前三季度就实现营业额近41亿元,紧随淘宝商城 ...
苏宁易购2019上半年业绩大增背后：已完成全场景零售布局，家电领跑全渠道
7月30日,国内智慧零售龙头企业苏宁易购(002024.SZ)公布了2019年上半年的业绩快报.数据显示,苏宁上半年营收.利润双双录得大幅增长. 2019上半年:苏宁易购逆势上扬,家电领跑全渠道据国 ...
Android开发笔记（一百二十）两种侧滑布局
SlidingPaneLayout SlidingPaneLayout是Android在android-support-v4.jar中推出的一个可滑动面板的布局,在前面< Android开发笔记 ...
移动端（rem布局--苏宁易购）
技术栈:rem布局+less预处理+flex布局 html文件: <!DOCTYPE html> <html lang="en"><head>& ...
苏宁易购财报看点：加码线上业务布局，注册会员增至6.23亿人
近日,苏宁易购(SZ:002024)发布2020年第三季度报告.财报显示,2020年前三季度,苏宁易购实现营业收入1808.62亿元,比2019年同期下降10.02%:归属于上市公司股东的净利润5.4 ...
两列自适应布局方案整理
前提本文讨论的是两列自适应布局:左列定宽/不定宽,右列自适应. 虽然分这两种情况,但实际上不定宽的方案同样适用于定宽的场景,因此不定宽的方案泛用度更高. 左列定宽,右列自适应 margin + fl ...
最常用的两种C++序列化方案的使用心得（protobuf和boost serialization）
From: http://www.cnblogs.com/lanxuezaipiao/p/3703988.html 导读 1. 什么是序列化? 2. 为什么要序列化?好处在哪里? 3. C++对象序列 ...

使用两种rem布局方案-实现静态苏宁易购移动端首页

使用两种rem布局方案-实现静态苏宁易购移动端首页

方案1:rem+less+媒体查询

html

common.less

index.less

方案2:flexible.js+rem

小插件

小问题

html

index.less

flexible.js

使用两种rem布局方案-实现静态苏宁易购移动端首页相关推荐

最新文章

热门文章