|
原理： 是根据根节点html的默认字体大小font-size来计算的，以此进行rem的初始值设置。实现对不同屏幕宽度的适配。（100px/16px=6.25=625%, 100代表100px,这里是以100px来换算的，即：1rem=100px。当然有些地方是10px/16px=62.5%，以10px来换算的，即1rem=10px。）
rem是css3中新增加的一个单位属性，是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 具体解析： 在桌面浏览器上font-size的初始值是16px（即1rem = 16px） <!-- rem的初始赋值 -->
<html style="">
<head></head>
<body>
<div style="font-size: 1rem">此处的1rem即设备的默认字体大小，桌面浏览器默认字体大小是16px</div>
</body>
</html>当然可以在css上进行初始赋值，或者使用js进行动态的初始赋值！ /*使用css进行rem的初始赋值*/
html{
font-size: 100px; /*此处的初始赋值表示1rem=100px*/
}rem的 62.5% 和 10px的区别 在桌面浏览器上 font-size 的默认值是16px; 可知 font-size: 62.5%; 即表示10px （通过计算 16 * 62.5% = 10 得到） 那么 font-size: 62.5%; 和 font-size: 10px; 的区别在什么地方呢？ 比较好的解释： 桌面浏览器默认页面字体大小是16px，这种情况下设置成具体像素大小或者对应的百分比，看起来的效果是一样的； 但是其他类型的设备的默认字体大小不一定是16px， 特别是高分辨率的设备，16px大小的字体在它们上面看起来会非常小，所以不能在body上设置具体像素值， 设置成百分比，可以按照设备的基准字体大小给编写的网页设置好最适合用户浏览的字体大小。 正确的rem使用方法 使用 font-size: 62.5%; 更好 /*rem的初始赋值*/
html{
font-size: 62.5%; /*此处的初始赋值表示1rem=10px*/
}然而坑无处不在。。。新的问题： 我们开发常用的chrome浏览器，支持的最小字体大小是12px， (这里有个坑，在大部分现代浏览器都没有问题，但是，谷歌font-size:62.5%刚好是10像素，而谷歌是不支持小于12像素的字体的，所以，谷歌无形当中将所有的rem全部变大了。这下麻烦了，所有的地方都错位了。chrome在字体小于12px时都当12px 处理，也就是设置62.5%相当于设置成了75.0%。但是在除的时候又是除的10得到rem值，那么当然错位。) /*rem在不同浏览器下的结果*/
html{
font-size:62.5%;
}
header{
height:8rem; /*在其他浏览器表示80px，在chrome上表示96px*/
}解决办法： font-size:625%; 1rem = 100px， 以此为单位进行换算，可以避免以上问题的出现 项目中： 如果你们手机是320px的，那么截图出来尺寸是640px; dpr:像素比 dpr=物理像素（750px） / 逻辑像素(375px，我们去布局写的尺寸) =2 逻辑像素 = 物理像素 / dpr; dpr的取值：如果的设计图是640px ,750px 的时候 dpr= 2 如果你的设计图为1080的时候，那么dpr=3； (1)如果设计图为750px或者640px drp = 2 那么逻辑像素为：375px或者320px 下面布局的尺寸：90px（量出来的尺寸,也就是设计图的尺寸） / dpr(2) = 45px(逻辑像素)； 我们rem写多少：45/100= 0.45rem; --------------------- 作者：叶落森 来源：CSDN 原文：https://blog.csdn.net/xiasohuai/article/details/83934830 版权声明：本文为博主原创文章，转载请附上博文链接！ |
|
最新喜欢： wx160
|
公众号
