1.先设置header里面的meta标签:
1 <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">2.在header写上<script>标签
1 <script type="text/javascript"> 2 document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px'; 3 </script>问题:为什么要设置Html的font-size?
答:这里是设置html标签的font-size,上面概论红色字写的很清晰,页面元素使用rem单位时,是相对于这个html标签的font-size的大小为基础的。
问题:为什么是clientWidth/640?为什么要乘以100?
答:
1.是因为这里是作为一个基础数值,换个方向去想,这里先不乘以100以免产生误解。
例如:设计稿宽度是640px,有一个元素设计稿上的宽度是50px,设备物理宽度是320px,那么我们在页面上应该设置宽度为 width:50rem,相当于宽度是:50*(320/640)=25px;这里能正确算出在320px的设备上刚好占一半,其实可以想象为 rem=(320/640)。
2.一般浏览器的最小字体是12px,如果html的font-size=(320/640)px,相当于font-size=0.5px,那么这个数值就小于12px,会造成一些计算的错误,和一些奇怪的问题,*100后,font-size是50px,就可以解决这种字体小于12px的问题。
3. 为了计算方便 我们后面把比率乘以了100,(320/640)*100,那么相对应这个元素在设置数值的时候就需要除以100了(50/100),这样可以保证最后出来的数值不变.
设计稿是640px,有一个红色盒子宽高都是320px,里面的文字是32px,那么下面是这个例子的代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1"> <script type="text/javascript"> document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px'; </script> </head> <body style="margin: 0 ;padding: 0;font-size: 0.32rem"> <div style="width: 3.2rem;height: 3.2rem ;background: red"> <span>danny.xie</span> </div> </body> </html>1.在iphone5下的情况,设备的物理像素是320px
1.在iphone6下的情况,设备的物理像素是375px
可以看到字体的大小和红色盒子的宽高跟设计稿上面的比例是保持一致的,这样就是rem适配不同设备的的基本用法,如上文有错误,欢迎指出和讨论,十分感谢。