手机端font-size:62.5%原理

最新推荐文章于 2023-06-02 16:57:58 发布

前端很忙

最新推荐文章于 2023-06-02 16:57:58 发布

阅读量1.2k

点赞数 1

分类专栏：总结文章标签： css css3 html html5 web app

原文链接：https://blog.youkuaiyun.com/xiasohuai/article/details/83934830

版权

总结专栏收录该内容

11 篇文章

订阅专栏

原理：是根据根节点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，

/*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;