REM倍数适配 — 移动端页面自适应

最新隔壁小娜同学在制作移动端页面时发现了一个新东西，其实也不能算是新东西，因为它已经默默的存在了很久了，只是最新才被人挖出来使用而已。他就是css属性里的rem。

rem是啥？

做过移动端APP的都知道，移动端界面都是有一个比例的。比如Ipone就分为1倍，2倍，3倍当遇到不同尺寸的屏幕时，会自动适应对应的倍数，从而调取最佳显示效果的图片。但是html里一直都是用100%来解决自适配，后来有了一些框架比如bootstrap，相对的优化了一些。但是还是不满足。而rem就是一个类似移动端的倍数基数。

近期（其实我也不知道什么时候），淘宝的手机页面开始使用了rem单位，于是又掀起了一场。。。那个啥。

为什么用？

先看下基础。我们知道，手机页面一般做320px宽和640px宽用来对应IOS和Android。但是这不够完美，因为要做2套，而且每次要适配一个新的尺寸都要做一套。

而有了rem这个倍数单位，我们就只要做一套320px宽的，然后在640px的设备上以2倍的大小显示就行。

对，你想的没错。如果是其他尺寸，只要找到倍数关系，修改下倍数，其他代码都不用动，自动计算。

怎么用？

rem的设置非常简单，首先给html设置一个字体大小基数，就是给html设置一个font-size的值。rem会自动获取这个值作为倍数基数。

html{font-size:1px;}

上面这行的意思就是，设置1rem=1px

同时，我们所有的框架类的width和height等属性都要使用rem来作为数据单位

div在页面上，显示为320px宽度，100px的高度。计算就是1*320=320px

理解了上面2段代码之后，我们来看看怎么变

如果我们的设备变成了640px宽，那么上面的代码设置的div也只会显示320px的宽，只有页面的一半。这时候我们就要启动css选择器了。

@media only screen and (min-width: 640px){html {font-size: 2px !important;}}

上面这段代码的意思就是当页面宽度大于等于640的时候，设置倍数基数为2px。

对，你理解的没错，写上这段代码之后，如果在640px宽的设备上运行，计算结果就变成了2*320=640px。这时候，这个div又满屏了。

误区？

就像小娜一样，他把所有的px单位都成了rem，之后。。。

没错，页面整体变大了，虽然比例是没变，但是，字体也跟着变得老大。

所以，我们在使用rem单位的时候一定要注意，rem单位仅仅给框架来使用，比如保证几个div不失去比例。而字体还是要使用px来作为单位，避免跟着扩大。

福利

这里已经准备好了一段自适应的代码，放在css里，就会自动适配常用的移动端设备了。

/*****************rem倍数适配*********************/
html{font-size:100px;}/*320基本配置*/
@media only screen and (min-width: 360px){html {font-size: 112.5px !important;}}/*大于360*/
@media only screen and (min-width: 384px){html {font-size: 120px !important;}}/*大于384*/
@media only screen and (min-width: 400px){html {font-size: 125px !important;}}/*大于400*/
@media only screen and (min-width: 424px){html {font-size: 132.5px !important;}}/*大于424*/
@media only screen and (min-width: 480px){html {font-size: 150px !important;}}/*大于480*/
@media only screen and (min-width: 540px){html {font-size: 168.75px !important;}}/*大于540*/
@media only screen and (min-width: 640px){html {font-size: 200px !important;}}/*大于641*/
@media only screen and (min-width: 680px){html {font-size: 212.5px !important;}}/*大于680*/
@media only screen and (min-width: 720px){html {font-size: 225px !important;}}/*大于720*/
@media only screen and (min-width: 960px){html {font-size: 300px !important;}}/*大于960*/
@media only screen and (min-width: 1024px){html {font-size: 320px !important;}}/*大于1024*/
@media only screen and (min-width: 1280px){html {font-size: 400px !important;}}/*大于1280*/
@media only screen and (min-width: 1440px){html {font-size: 450px !important;}}/*大于1440*/
@media only screen and (min-width: 1920px){html {font-size: 600px !important;}}/*大于1920*/
/*****************rem倍数适配*********************/

2018-02-09
PS:被坑了一下,今天修改了下代码,由原来的font-size:1px; 1:1的比例升级为font-size:100px; 1:100的比例,原因是因为chrome最小字体限制为12px,所以会造成chrome上显示错位.改成1:100的比例之后,对应的写代码宽度的时候除以100即可,例如原来是10rem宽度,现在是0.1rem