1. 概述
1.1 说明
rem是css3中新增的一个单位属性(font size of the root element),根据页面的根节点(html)的字体大小进行转换的单位,通过此单位属性可以进行自适应性布局开发。
1.2 示例说明
rem的初始值是16px,即默认值为1rem=16px;若在根节点html中设置了对应的font-size值,则1rem等于所设置的值,如下示例(html中font-size:100px,即1rem=100px)
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <style> html,body{ font-size: 100px; } div{ width: 1rem; height: 1rem; background: red; } </style> </head> <body> <div></div> </body> </html>
2. js页面计算rem
说明:使用以下js后,可以看到html对应的font-size的值是多少,此时1rem即为此font-size值。
window.onload = function() { /*750代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是为了好算*/ getRem(750,100); }; window.onresize = function() { getRem(750,100); }; function getRem(pwidth,prem) { let html = document.getElementsByTagName(‘html‘)[0]; let oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.style.fontSize = oWidth / pwidth * prem + ‘px‘; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。