关于rem支队设计稿宽度，设计rem调式比例

最新推荐文章于 2021-01-24 16:06:10 发布

原创最新推荐文章于 2021-01-24 16:06:10 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文介绍了如何利用CSS3的REM单位配合viewport宽度（vw）进行响应式设计，确保不同设备上的页面显示一致性。通过设置html的font-size为13.333333vw，使得1rem等于100px设计稿的1/10。在页面开头引入动态计算font-size的代码，可以轻松地将60px宽高的div转换为相应的rem值，实现元素尺寸的自适应调整。

css3规定：1rem的大小就是根元素html的font-size的值
通过设置根元素html的font-size的大小，来控制整个html文档内的字体大小，元素宽高，内外边距等，根据移动设备的宽度大小来实现自适应，不同的设备都展示一致的页面效果
renm宽度比例设计稿宽度首页：
1rem=100px
100vw =750px
所以 1rem=100vw /7.5 = 13.3333333vw
最后设置根元素font-size为13.333333vw即可
引入：页面开头出引入下面这段代码，用于动态计算font-size
在这里插入图片描述
这样当1rem = 13.333333vw时，获得一个宽高为60px的div的rem值，直接：
div {
width: .6rem;
height: .6rem;
}