CSS移动端适配方案（三种）

方案一【推荐】 rem vw cale()

基于rem和vw单位并配合calc()函数的移动端适配代码

html {
    font-size: 16px;
}
@media screen and (min-width: 375px) {
    html {
        /* 375px作为16px基准，414px宽度时正好对应18px的根字号大小 */
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 屏幕宽度从414px到1000px，根字号大小累积增加4px（18px-22px） */
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 屏幕宽度从1000px往后每增加100px，根字号大小就增加0.5px */
        font-size: calc(22px + 5 * (100vw - 1000px) / 1000);
    }
}      

3px改写为：

.container {
    gap: calc(3 / 16rem);
/* 也可以直接设置成： */
/* gap：.1875rem; */
}      

rem单位的缺陷

• 渲染尺寸并不总是整数，偶尔会带来一些渲染的问题

例如，1.25rem在375px宽度屏幕下的计算值是20px，但是在414px宽度屏幕下的计算值却是22.5px。

当SVG图标尺寸不是整数的时候，边缘可能会出现奇怪的间隙；又如，需要精确知道若干个列表的高度之和的时候，如果列表的高度不是整数，则最终的高度值和实际的渲染高度值会有误差。

在这些场景下，可以将对应元素的rem单位改成px单位进行表示。

方案二 clamp()

若浏览器支持clamp()函数，可以使用：

html {
    font-size: 16px;
font-size: clamp(16px, calc(16px + 2 * (100vw - 375px) / 39), 22px);
}      

缺点：根字号的变化范围不及@media语法实现得精细

优点：代码比较精简

方案三 vw

120px×80px的UI原型图时

img {
    width: 32vw;
    height: 21.333vw;
}      

.container {
    gap: calc(3 * 100vw / 375);
/* 也可以直接设置成： */
/* gap： .8vw; */
}