<!--
rem CSS3新增的一个相对单位，相对于根节点(html)字体大小的值 root
html{font-size:10px} 2rem=20px
通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖html字体的大小
-->
第一种方式：多分辨率设定rem设定 （不同的分辨率不同的大小，例如iPhone6中，1rem=23px）
/*Note3*/ @media only screen and (min-width:360px){ html{font-size:22px!important;} } /*iPhone6*/ @media only screen and (min-width:376px){ html{font-size:23px!important;} } /*iPhone6 plus*/ @media only screen and (min-width:414px){ html{font-size:25px!important;} } /*big Resolution*/ @media only screen and (min-width:641px){ html{font-size:25px!important;} }
第二种方式：js实现，比如你的设计图是1080px的，那么你用1080/18=60px,1rem=60px
<!--
rem布局
1、必需动态的去设置html的大小，才能适配
2、根据页面(注意：是psd图，也就是真实大小大)的宽度除以一个系数，把算出的这个值赋给html的font-size属性
1、为什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有一行中放多个元素。所以就把一行分成n份
2、不除一个数字的话，那1个rem就是屏幕的宽度，这个值太大，如果一个元素的宽度比它小的话，就不方便计算
3、这个系数，自己定。多少都可以，但是建议给一个能整除的值
特点：
1、所有有单位的属性会根据屏幕的尺寸自动计算大小
2、同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在尺寸大的设备下显示的大
3、一般以iphone6为基准，以它的宽度750除上一个系数，再去算rem
-->
<script> (function(){ var html=document.documentElement; var width=html.getBoundingClientRect().width;//获取窗口大小 html.style.fontSize=width/18+‘px‘; // 设计图是1080px的 1rem=60 })(); </script>
