完整的REM布局的工作流程与规范

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

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

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

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

github地址：https://github.com/finance-sh/adaptive，

至于这个JS主要用来动态计算相对不同的屏幕大小设置html的font-size的值，当然还有一点儿其他的，自己去了解哈。

接下来看这个

// 设计图宽度  window['adaptive'].desinWidth = 750;  // body 字体大小 会将body字体大小设置为 baseFont / 100 + 'rem'  window['adaptive'].baseFont = 28;  /*  // 显示最大宽度 可选  window['adaptive'].maxWidth = 480;  // rem值改变后执行方法 可选

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

设置完了之后我们把基数（制作页面的时候一个参考项）定为100培训（别问为什么，因为个人觉得好用）。

实际“堆砖”过程当中是这个样子的。设计稿上我们看到一个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。

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

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

有涵养的人都会带上出处。。。。。

原标题：完整的REM布局的工作流程与规范

关键词：