在页面整体布局中，页面元素的尺寸大小（长度、宽度、内外边距等）和页面字体的大小也是重要的工作之一。
一个合理设置，则会让页面看起来层次分明，重点鲜明，赏心悦目。反之，一个不友好的页面尺寸和字体大小设置，则会增加页面的复杂性，增加用户对页面理解的复杂性；甚至在当下访问终端（iPhone、iPad、PC、Android…）层出不穷的今天，适应各式各样的访问终端，将成为手中的一块“烫手的山芋”。
所以在近几年，“九宫格”式的“流式布局”再度回归。为了提供页面布局，及其它的可维护性、可扩展性，我们尝试将页面元素的大小，以及字体大小都设置为相对值，不再是孤立的固定像素点。使其能在
父元素的尺寸变化的同时，子元素也能随之适应变化
。以及结合少量最新CSS3的
@media
查询，来实现“响应式布局”，bootstrap这类CSS框架大势兴起。
然而在CSS中，W3C文档把尺寸单位划为为两类：
相对长度单位
和
绝对长度单位
相对单位：
%
：相对单位，它是相对于父级(自身)大小进行定位
缺点：能确定范围的还是比较好计算，对于不太好确定值的地方不好使用百分比，并且会导致变形，高度一般不好控制
em
：相对于当前容器的字体大小进行变化，比如当前容器内字体大小为20px，那么1em = 20px
缺点：会根据当前容器字体大小发生变化，假设每个容器字体大小不一致，那么计算会非常繁琐
rem
：font size of the root element。相对于当前根(html)元素的字体大小进行变化，比如当前设置html的字体大小为20px，那么1rem = 20px。浏览器默认的1rem = 16px
绝对单位：
px
：像素单位是绝对单位，你设置了多少，不管什么屏幕下，都会保持不变。
缺点：任何情况下都是固定值
em和rem的区别点击查看
如何才能使用rem进行适配呢？
值根据html根元素大小而定，同样可以作为宽度，高度等单位
!(
function
(doc,win){
var
docHtml =
doc.documentElement;
//
判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法
resizeEvt = 'orientationchange'
in
window ? 'orientationchange' : 'resize'
,
resizes
=
function
(){
//
获取当前屏幕的大小
var
cw =
docHtml.clientWidth;
//
如果没有获取到当前屏幕的大小
if
(!cw)
return
;
if
(cw >= 750
) {
docHtml.style.fontSize
= '100px'
;
}
else
{
//
动态修改font-size 100 * (375 / 750) = 50 （iPhone6/7/8为例）
docHtml.style.fontSize = 100 * (cw / 750) + 'px'
;
if
(!doc.addEventListener)
return
;
addEventListener事件方法接受三个参数：
（1）事件名
（2）回调执行函数
（3）是否冒泡
win.addEventListener(resizeEvt,resizes,
false
);
//
绑定浏览器缩放与加载事件
doc.addEventListener('DOMContentLoaded', resizes,
false
);
})(document,window)
将以上代码放入一个单独的js文件当中，然后引入html文件中使用即可，这样在更换手机型号时，它就会动态修改html根节点的字体大小
下面给大家演示下实际代码：
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="./resize.js"></script>
<style type="text/css">
margin: 0px;
padding: 0px;
html,body{
height: 100%;
width: 100%;
/* 设置根元素的字体大小 */
html{
font-size: 50px;
.header{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: lightcoral;
font-size: 30px;
color: #ccc;
list-style: none;
/* 弹性布局 */
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 0.2rem;
ul li.item{
/* root size :50px 1rem =50px */
width: 2rem;
height: 2rem;
border: 1px solid orangered;
margin-bottom: 0.2rem;
</style>
</head>
<!-- 头部 -->
<header class="header">
<div class="header_top">
<h3>移动端适配</h3>
</div>
</header>
<!-- 主体内容部分 -->
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</body>
</html>
（上面引入的
resize.js
就是rem自适应配置文件）
运行效果：
（基于IPhone 6/7/8）
（更改手机型号，动态修改根元素字体大小）
（注意！型号为iPad Pro时clientWidth已经大于750，所以根节点字体大小设置为100px）
至此，就完成了rem自适应移动端
本文来自博客园，作者：
不知名前端李小白
，转载请注明原文链接：
https://www.cnblogs.com/libo-web/p/15793238.html
