标签：
移动端适配方案，说多也很多。可以使用百分比布局，但百分比与em都是基于父元素进行计算的，在实际应用中不是很方便。使用rem不仅可以设置字体大小，块大小也可以设置。而且可以良好的适配各种终端，所以这方案很受欢迎。
rem定义及浏览器支持情况
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。可以先看看rem的浏览器支持情况：
可以看到移动端基本支持：
ios:6.1系统以上支持；
android：2.1系统以上都支持；
桌面端IE支持情况不乐观。
用法：
现代浏览器，IE9+，FireFox，Safari，Chrome，Opera，默认字体是16px,设置下根元素的字体大小为16px:
html { font-size:16px; }
，然后，如果希望某段文字的字体大小是12px,需要设置：
p { font-size: 0.75rem; //12÷16=0.75（rem） }
块大小的设置是类似的，所以整个布局的关键就是设置根元素的字体大小了。设置好根元素字体大小值，布局就可以做到自适应了。
块大小的设置，来个例子：
设置根元素字体大小为37.5px,在iphone6里面需要一个宽100px的块，就是这样了：
<!DOCTYPE html> <html> <meta charset="utf-8"></meta> <head> <title>vertical-align</title> <style type="text/css"> html{ font-size:37.5px; } #contentBox{ width:2.667rem; height:2.667rem; background:pink; } </style> </head> <body> <div id="contentBox"> </div> </body> </html>
如果在iphone5下想得到一个100px的块，需要设置基准值（即根元素字号）为32px。
下面专门谈谈rem的基准值设置。
rem基准值设置
想要rem适配不同尺寸的设备，就需要针对不同设备设置合适的基准值，如上例所示。
问题来了，基准值设置成多少合适？
一般拿到的设计稿是375px(2倍稿)*2的，也就是iphone6的大小。那么对于iphone6来说，基准值可以设置为37.5px。即设备宽度/10。这里做了一个除以10的计算，是因为不希望font-size值太大。这样使用rem时值也不会太大了。
如果是iphone5，基准值就是32px。
问题又来了，如何根据设备尺寸来设置基准值？
有两个方法，通过css media query 和js添加基准值：
css media query:
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ html{font-size: 37.5px;} }
用media query来实现难覆盖到所有设备：
html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } }
而通过js来设置，可以实现覆盖所有设备：
js来设置：
document.getElementsByTagName(‘html‘)[0].style.fontSize = window.innerWidth / 10 + ‘px‘;
关于方案的利弊，其实上面的例子里面可以看出，基准值设置为37.5px时（这个是设计稿的常用值），在计算相应的rem的时候，小数需四舍五入，可能会带来一定的误差，设计的同事像素眼是可以觉察到的。在可以接受的情况下允许这些误差存在。在安卓机子上较多出现这类情况。
其他适配方案
也可以采用固定布局：
1.在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。
<meta name="viewport" content="width=320,user-scalable=no">
2.rem也可以使用自己设置viewport和content的方法来适配，以方便计算和设置值：
例如：
meta.setAttribute(‘content‘, ‘initial-scale=‘ + 1/dpr + ‘, maximum-scale=‘ + 1/dpr + ‘, minimum-scale=‘ + 1/dpr + ‘, user-scalable=no‘);
其中dpr通过window.devicePixelRatio获取，iphone6的值是2.
对于2倍稿，可以直接设置基准值为2倍，这样就不用设计稿的值除以2了。
iphone6适配的设计稿750px,基准值设置为75px就可以了。
修改了缩放倍数之后，1px边线的问题也同时解决了。
代码：
<!DOCTYPE html> <html> <meta charset="utf-8"></meta> <meta name="viewport" content="" id="viewMeta"> <head> <title>vertical-align</title> <style type="text/css"> html{ font-size:75px; } #contentBox{ width:2.667rem; height:2.667rem; background:pink; border:1px solid #000; } </style> </head> <body> <div id="contentBox"> </div> </body> <script type="text/javascript"> var meta = document.getElementById(‘viewMeta‘); var dpr = window.devicePixelRatio; meta.setAttribute(‘content‘, ‘initial-scale=‘ + 1/dpr + ‘, maximum-scale=‘ + 1/dpr + ‘, minimum-scale=‘ + 1/dpr + ‘, user-scalable=no‘); </script> </html>
图图：
参考：
标签：
原文地址：http://www.cnblogs.com/linda586586/p/5604675.html
