关于rem单位的使用

最新推荐文章于 2024-05-16 05:17:30 发布

weixin_33845477

最新推荐文章于 2024-05-16 05:17:30 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moumou0213/p/6473966.html

rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)

页面基准320px(20px),html font-size值的计算：

[javascript]

　　　　var ele=document.getElementsByTagName("html")[0],  
            size=document.body.clientWidth/640*20;  //以640为基准，640屏幕下html的font-size为20px,如在320屏下，1.2rem的字体大小为12px。
        ele.style.fontSize=size+"px"

注：需设置meta缩放比1:1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

具体使用rem的方法利弊等内容详见网址https://isux.tencent.com/web-app-rem.html

转载于:https://www.cnblogs.com/moumou0213/p/6473966.html