rem（vw的情况下，实现不同分辨率页面的样式统一）

最新推荐文章于 2023-08-21 17:01:36 发布

很单纯的娃

最新推荐文章于 2023-08-21 17:01:36 发布

阅读量429

点赞数

文章标签： css3 javascript css

本文链接：https://blog.csdn.net/qq_37826599/article/details/124590770

版权

本文探讨了如何在响应式设计中使用固定像素（px）与视口宽度单位(vw)进行转换，针对不同设计图尺寸（如640px和750px）和dpr，计算出html的font-size设置。关键点在于理解vw的计算方法：100px等于视口宽度的百分比，如在640px设计下，100vw等于320px，从而得出1px等价于3.2vw或26.67vw不同时段的换算关系。

摘要由CSDN通过智能技术生成

为了方便rem的计算：
html设置font-size的值：100px;
1rem == 100px

出现问题：100px不会自动适配
找到一个能随着视口改变的单位 vw

下面需要研究的问题： 100px == ? vw


100px == ?vw

根据设计图先确定适配的核心设备。

第一种情况：设计图为640px
设计图640px 考虑dpr 为2（dpr是设备像素与逻辑像素之比）
640px / 2 == 320px
视口的宽 320px
100vw == 320px
1vw == 3.2px
?vw == 100px
31.25vw == 100px;


第二种情况：设计图为750px;
设计图为750px 考虑dpr为2
750px / 2 == 375px;
视口的宽 375px;
100vw == 375px;
1vw = 3.75px;
?vw == 100px;
26.67vw == 100px;

 

记住：
如果设计图为640px html的font-size值为31.25vw;
如果设计图为750px html的font-size值为26.67vw;