手机端rem实现自适应布局
2017-11-04 本文已影响0人
卡西法_冯文新
rem是什么?
rem（font size of the root element）是指相对于根元素<html>的字体大小的单位;
理解rem
例如设置html标签样式如下
html{
font-size:20px;
}
那我们画一个红色，宽高都为100px的div;
样式代码如下：
.redDiv{
width:5rem;
height:5rem;
background:red;
font-size:1rem;
color:#fff;
}
Paste_Image.png
rem是相对单位，此时1rem = 20px;
实战布局
需求：假如UI设计的手机页面宽度是750px; 需求制作页面时还原度高，兼容多个手机平台，
步骤：1
首先我们照旧使用px做传统的布局，做成和稿子一模一样; 稿子和代码如下
Paste_Image.png
html代码:
<div class="renew" id="renew">
<ul>
<li>
<dl>
<dt>优质体验</dt>
<dd>按需创建服务，满足不同用户需求</dd>
<dd>可随时取消服务，用户自主选择</dd>
</dl>
</li>
<li>
<dl>
<dt>自动扣费</dt>
<dd>定时扣费，自动完成，</dd>
<dd>免去多次主动付费的繁琐操作</dd>
</dl>
</li>
</ul>
</div>
css代码:
.renew {margin:60px 0;}
.renew ul {margin-top:70px; padding-left:24px;}
.renew li {border-left:1px solid #4cc1e9;}
.renew dl {padding-left:50px; padding-bottom:40px;}
.renew dt {color:#4cc1e9; font-size:26px; padding-top:30px; margin-bottom:10px;}
.renew dd {font-size:24px; color:#666; line-height:44px;}
步骤：2
现在我们来兼容手机端
我们在头部head中加入这段手机端声明代码
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
由于各个手机的尺寸不一样。所以根元素的font-size的设定肯定不是定值，是动态改变的。
我们引入以下js，现在只要页面宽度改变。js会自动计算根元素相应的font-size;
//Rem
(function (win, doc) {
if (!win.addEventListener) return;
var html = document.documentElement;
function setFont() {
var cliWidth = html.clientWidth;
if(cliWidth > 750){
cliWidth = 750;
}
html.style.fontSize = 100 * (cliWidth / 750) + 'px';
}
win.addEventListener('resize', setFont, false)
doc.addEventListener('DOMContentLoaded', setFont, false)
})(window, document);
步骤：3
我们来把css样式转换成rem单位，全屏状态下，能看到根元素的font-size:100px;
即1rem = 100px;
Paste_Image.png
开始体力活，手动换算如下：
.renew {margin:0.6rem 0;}
.renew ul {margin-top:0.7rem; padding-left:0.24rem;}
.renew li {border-left:1px solid #4cc1e9;}
.renew dl {padding-left:0.5rem; padding-bottom:0.4rem;}
.renew dt {color:#4cc1e9; font-size:0.26rem; padding-top:0.3rem; margin-bottom:0.1rem;}
.renew dd {font-size:0.24rem; color:#666; line-height:0.44rem;}
刷新浏览器，转换后全屏状态还是和前面的布局显示一模块一样
再将浏览器切换到移动模式看看，是不是就完成了自适应。
Paste_Image.png
步骤4：工具换算
很明显手动换算是个体力活，我们可以交给工具px转rem。
网址：http://520ued.com/tools/rem
稿子是750的宽，js中我们刚好设定根元素font-size的最大值是100px;
所以直接把css文件拖入直接完成转换
Paste_Image.png
后记
文章有如错误的地方，请指正。谢谢。
