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