rem响应式最佳实践

前言

rem是CSS 3中新增的一种相对长度单位。 当使用rem单位时，根节点的字体大小(font-size)决定了rem的尺寸。只需要动态更改的字体大小(font-size)即保障不同视窗大小下，页面效果的一致。

博主很早以前就使用过rem来做长度单位，但是使用率并不高，今天参考了一个网站，说下自己的感想。

实现方式：

一、JS动态计算

不贴代码了，不如使用CSS计算

二、CSS动态计算

我们使用1920视窗宽度为基数，对应设置font-size：100px
根据不同视窗大小进行CSS计算方案

html { font-size: calc(100vw / 19.2); }

为了字体不会太小或者太大，我们设定最小值、最大值

html { font-size: clamp(12px, calc(100vw / 19.2), 150px); }

三、使用@media媒体查询

html {
    font-size: clamp(12px, 5.20833vw, 150px);
}

@media only screen and (min-width: 750px) and (max-width: 899px) {
    html { font-size: 8.3333333333vw; }
}

@media only screen and (min-width: 900px) and (max-width: 999px) {
    html { font-size: 7.2916666667vw; }
}

@media only screen and (min-width: 1000px) and (max-width: 1099px) {
    html { font-size: 6.7708333333vw; }
}

@media only screen and (min-width: 1100px) and (max-width: 1199px) {
    html { font-size: 6.5625vw; }
}

@media only screen and (min-width: 1200px) and (max-width: 1299px) {
    html { font-size: 6.1458333333vw; }
}

@media only screen and (min-width: 1300px) and (max-width: 1399px) {
    html { font-size: 5.6770833333vw; }
}

@media only screen and (min-width: 1400px) and (max-width: 1499px) {
    html { font-size: 5.5208333333vw; }
}

@media screen and (min-width: 1920px) {
    html { font-size: 100px; }
}

html[data-device="mobile"] {
    font-size: 13.33333vw;
}

最优方式是第三种，我们可以对效果进行对比
原始样式：

方案一、二样式：

方案三：

我们可以看到，虽然方案一、方案二确实保持了统一的样式，但很古板，没有压缩可用的间距，导致效果反而不好。
方案三则很好的使用了空白的区域