rem从去年的手淘双11开始火起来之后一直就想去使用，但是苦于学习途径有限，工作任务也比较繁忙导致一度延后。

那么现在对相关知识的学习与初步的项目实践之后，在这里记录一下使用rem解决各屏幕适配问题。废话不多说~~一步步来

 

首先是从设计师那边拿过来的设计稿可能是640，或是750的，这些都不重要。

然后我们要引用一个JS，adaptive.js 

github地址：https://github.com/finance-sh/adaptive，先从这儿引用一段文字：

最最理想的解决方案当然是设计图和手机屏幕的像素点一一对应，就像我们在PC端所做的一样。拿750px宽的设计图来说，如果手机屏幕的水平分辨率是750px，那么这样是最理想最完美的，对于水平分辨率不是750px的屏幕呢？这个时候我们把设计图进行缩放，使其宽度刚好与屏幕的分辨率相等，即是等比例缩放设计图，使其宽度刚好覆盖手机屏幕。 如果我们使用<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">这种常用标签，视觉同学经常会抱怨1px过粗的问题，这个时候我们需要缩放viewport来达到真正还原1px的效果。 开发的便捷性也是理想解决方案的一部分，大部分rem解决方案，是把设计图分成100份，1rem等于10份，总宽度10rem。如果设计图是750px，1rem就等于75px，切图的时候需要将px转换为rem,这个时候就需要用设计图的px值除以75得到rem的值，得到的rem值基本都是带几位小数的，虽然我们可以用less，sass这类css预处理语言来统一处理，但是如果我们让1rem等于100px，在切图的时候就可以更加快速方便了。比如设计图宽度为100px，css则书写为1rem即可。 要实现1rem等于设计图100px，页面的总的宽度就不是10rem了，而是随设计图的宽度而变化了。拿750px的设计图来说，总的宽度就是7.5rem。我们先根据设备像素比来缩放viewport，布局视口的宽度就调整好了，布局视口同样的宽度是7.5rem，我们就可以计算出html根元素的像素值，这样就大功告成了。 如果是文字，我们也建议使用rem。 对于iphone的retina高清显示屏，基本版本(adaptive.js)我们做了缩放处理，以达到最佳显示效果。 对于快速开发版本(adaptive-version2.js),viewport的width等于设备宽度，不会缩放 如果只是webview里，可以使用 adaptive-version3.js 在IOS和安卓下都会缩放，否则还是谨慎使用此版本，抱歉

至于这个JS主要用来根据当前分辨率动态设置html的font-size的值以及viewport。

 

接下来看这个配置项：

　　

// 设计图宽度 window['adaptive'].desinWidth = 750; // body 字体大小 会将body字体大小设置为 baseFont / 100 + 'rem' window['adaptive'].baseFont = 28; //他这个是有设置默认body字体大小的，不过我觉得这个很不好用，而且是以PX定的，那就要求所有有字体的地方都要换算成rem，所以不建议设置默认字体； //我的办法是，在css里面设置body的字体大小，如 .28rem // 显示最大宽度 可选 window['adaptive'].maxWidth = 480; // rem值改变后执行方法 可选

 

开始根据PSD在JS里进行配置，我把这一块的配置直接放到JS文件里了，加载完就可以执行，实际项目中如下：

window['adaptive'].desinWidth = 750;// 设计图宽度 //window['adaptive'].baseFont = 14;// 默认body字体大小,在这里我们不要设置固定默认字体大小，故将对应代码注释，通过body设置 .28rem设置字体大小 window['adaptive'].maxWidth = 480;// 页面最大宽度 默认540 window['adaptive'].init();// 调用初始化方法

设置完了之后我们把基数（制作页面的时候一个参考项）定为100px（别问为什么，因为好用，相比其他的基数，我更愿意直接简单的缩进两位）。

实际“堆砖”过程当中是这个样子的。设计稿上我们看到一个div，用以前的写法假设是这样

div{

　　width:200px;

　　height:150px;

　　margin:44px auto;

　　padding:0 10px;　

}

那么你现在需要这样写

div{

　　width:2rem;

　　height:1.5rem;

　　margin: .44rem auto;

　　padding:0 .1rem;

}

写完了，就这样就可以了，那你本来的px值除以100,就是你要的rem的值。

针对1px的border问题，直接写1px就好了，因为就算你在缩小也小不过1px。

好了别看了，赶紧拿个设计稿来玩玩，再测一下不同的设备显示情况。

 

还是引用上面的那个部分兼容性解决方案：

1，部分chrome版本局部刷新时字体过大问题 插入数据后调用方法： window.adaptive.reflow(); 2，后端模板渲染是刚开始字体过大问题 可以给body设置一个初始字体大小值，就不会出现此问题了

最后最后附上js代码。我的修改版本，删掉了设置body字体大小功能：

!function(e, t) { i() { o = 1, e.devicePixelRatioValue = o, s = 1 / o; var t = a.createElement("meta"); if (t.setAttribute("name", "viewport"), t.setAttribute("content", "initial-scale=" + s + ", maximum-scale=" + s + ", minimum-scale=" + s + ", user-scalable=no"), d.firstElementChild) d.firstElementChild.appendChild(t); else { var i = a.createElement("div"); i.appendChild(t), a.write(i.innerHTML) } } function n() { var e = Math.min(d.getBoundingClientRect().width, 540); r = 100 * e / t.desinWidth, d.style.fontSize = r + "px" } var a = e.document , d = a.documentElement , o = (e.devicePixelRatio, 1) , s = 1; i(); var l, r = 100; t.desinWidth = 640, t.baseFont = 18, t.init = function() { e.addEventListener("resize", function() { clearTimeout(l), l = setTimeout(n, 300) }, !1), e.addEventListener("pageshow", function(e) { e.persisted && (clearTimeout(l), l = setTimeout(n, 300)) }, !1), /*"complete" === a.readyState ? a.body.style.fontSize = t.baseFont * o + "px" : a.addEventListener("DOMContentLoaded", function() { a.body.style.fontSize = t.baseFont * o + "px" }, !1), n(),*/ d.setAttribute("data-dpr", o) } }(window, window.adaptive || (window.adaptive = {})); window['adaptive'].desinWidth = 750;// 设计图宽度 //window['adaptive'].baseFont = 14;// 默认body字体大小,在这里我们不要设置固定默认字体大小，故将对应代码注释，通过body设置 .28rem设置字体大小 window['adaptive'].maxWidth = 480;// 页面最大宽度 默认540 window['adaptive'].init();// 调用初始化方法

 

有些坑可能没踩到，等我踩到了再及时更新哈。

 

有涵养的人都会带上出处，对吧