前言：正好最近有时间，给移动端适配这里做一个整理，全面并且深入地重新去理解这些代码的含义，不再只是代码的搬运工，不再只会像之前一样复制粘贴,这篇rem和em是因为我自己做了好几个移动端的rem了，都是组长算好告诉比率什么的直接用就行了，对于rem和em到底是个什么东西还是完全没有头绪的，所以上网查了一些资料，整理出这篇文章。如果觉得对你有帮助，麻烦点个赞~~
关键词：移动端适配，rem，em~~......
正文：
一、基本定义
rem,官方定义就是根据网页的根元素来设置字体大小。那也就是说，一旦网页的根元素的大小发生了变化，那rem也会相应的变化，以rem为单位的也会成比例放大或缩小。那不就是等价于可以适应我们各种手机屏幕吗？
二、rem和px互相转化
现在大部分浏览器IE9+，Firefox、Chrome、Safari、Opera ，如果我们不修改相关的字体配置，都是默认显示font-size是16px.。那既然rem就是根据网页的根元素来设置字体大小，那么如果我们想给一个div标签设置12px的字体大小那么用rem来写就是：
html {
font-size:16px;
}
div {
font-size: 0.75rem; //12÷16=0.75（rem）
}
就是16px代表着1rem，那12px是多少rem呢？就是12÷16=0.75rem。那么，当网页根元素字体改变时，我们以rem为单位的标签们会发生什么样的变化？举个栗子：
.box{
width: 10rem;
height: 10rem;
background: red;
}
<div class="box"></div>
//默认情况下
image.png
html {
font-size: 17px;
}
.box{
width: 10rem;
height: 10rem;
background: red;
}
<div class="box"></div>
image.png
三、在工作中的应用-----写js(万能的js)
那我们怎样把它应用到我们的实际工作中去呢？大家都了解，在实际工作中，我们要面对各式各样的手机型号，他们的大小都不一样。但是我们收到的psd设计稿，往往只有一张。一般我们获取到的设计稿大部分是iphone6的，也就是最为常见的宽为750像素的设计稿。（事实上是我遇到的都是750像素的设计稿）而iPhone6的可视区在320px左右，所以在使用rem之前，我们一般会自觉的将所量出的宽高除以2。
既然rem是根据HTML根元素的fontsize大小来计算变化的，那我们就把根元素的fontsize设置为一个变量，这个变量根据移动端可视区宽度的变化而变化。
最初的做法是这样的：
document .getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
这里为什么要除以10呢，其实这个值是随便定义的,因为不想让html的font-size太大。可是有没有发现如果这样计算的话，我们按照的设计稿的像素来制作还是会有出入的。所以，就接下来有了这个办法：
var baseWidth = 750,
baseFontSize = 100;
document .getElementsByTagName('html')[0].style.fontSize = window.innerWidth / baseWidth * baseFontSize + 'px';
看懂了吗，没看懂的我来解释一下，看懂的就跳过。
我们现在有一个标准，就是设计稿。宽为750px,我们设根元素HTML的font-size为100px,这以便于后续测量后好计算，而事实上，很多都是以100为标准的。
现，我们有，标准版width750px,html{font-size:100px;},一部不知名手机，width = window.innerWidth，那么，现在有个问题，这个不知名的手机的HTML里面的font-size相应为多少？很简单的一道数学题。
750 width
100px ?
? = width/750 *100 width/750其实就是该不知规格的手机与标准的比率。也就是说，标准的100px,对应了实用手机的1rem。那在psd中，我们所测量的所有的宽高长度，只要除以100，都是实际我们写在css里的以rem为单位的长宽高。
最后，让我们完善它：
<head>
<script type="text/javascript">
/*动态调整rem值,除以100*/
function setsize() {
var winW = document.documentElement.clientWidth,
winH = document.documentElement.clientHeight,
baseFontSize = 100,
baseWidth = 750,
winWidthSize = Math.min(winW, winH);
if (winWidthSize < 270) {
winWidthSize = 270;
}
var _html = document.getElementsByTagName('html')[0];
_html.style.fontSize =winWidthSize / baseWidth * baseFontSize + 'px';
}
setsize();
</script>
</head>
切记：既然是JS代码，为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面。
四、这里收录一个从博客里面看到的方法：
我们知道，一般我们获取到的视觉稿大部分是iphone6的，所以我们看到的尺寸一般是双倍大小的，在使用rem之前，我们一般会自觉的将标注/2，其实这也并无道理，但是当我们配合rem使用时，完全可以按照视觉稿上的尺寸来设置。
1 设计给的稿子双倍的原因是iphone6这种屏幕属于高清屏，也即是设备像素比(device pixel ratio)dpr比较大，所以显示的像素较为清晰。
2 一般手机的dpr是1，iphone4，iphone5这种高清屏是2，iphone6s plus这种高清屏是3，可以通过js的window.devicePixelRatio获取到当前设备的dpr，所以iphone6给的视觉稿大小是（*2）750×1334了。
3 拿到了dpr之后，我们就可以在viewport meta头里，取消让浏览器自动缩放页面，而自己去设置viewport的content例如（这里之所以要设置viewport是因为我们要实现border1px的效果，加入我给border设置了1px，在scale的影响下，高清屏中就会显示成0.5px的效果）
meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
4 设置完之后配合rem，修改
@function px2rem($px){
$rem : 75px;
@return ($px/$rem) + rem;
}
双倍75，这样就可以完全按照视觉稿上的尺寸来了。不用在/2了，这样做的好处是：
1 解决了图片高清问题。
2 解决了border 1px问题（我们设置的1px，在iphone上，由于viewport的scale是0.5，所以就自然缩放成0.5px）
在iphone6下的例子：
我们使用动态设置viewport，在iphone6下，scale会被设置成1/2即0.5，其他手机是1/1即1.
meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');
我们的css代码，注意这里设置了1px的边框
.con {
margin-top: 200px;
width: 5.3rem;
height: 5.3rem;
border-top:1px solid #000;
}
参考资料：移动web适配利器-rem：http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/
网友评论