页面自适应，响应式布局

1.使用rem+媒体查询的方式

/* 默认字体大小，适用于小于980px的视口 */
html {
    font-size: calc(12px / 0.18); /* 初始字体大小 */
    transition: font-size 0.3s ease; /* 设置字体大小变化的过渡效果 */
}

/* 在980px到1679px范围内的视口 */
@media (min-width: 980px) and (max-width: 1679px) {
    html {
        font-size: calc(14px / 0.18); /* 设置字体大小，使得0.18rem = 14px */
    }
}

/* 在1680px及以上的视口 */
@media (min-width: 1680px) and (max-width: 1919px){
    html {
        font-size: calc(16px / 0.18); /* 设置字体大小，使得0.18rem = 16px */
    }
}

/* 在1920px及以上的视口 */
@media (min-width: 1920px) {
    html {
        font-size: calc(18px / 0.18); /* 确保在大屏幕上也是18px */
    }
}

/* 使用 rem 设置标题样式 */
/* 举例*/
h1 {
    font-size: 0.18rem; /* 在不同的视口宽度下，字体大小会根据根元素的大小自动调整 */
}
.class1 {
    width: 1.2rem; //1920像素等于120px
	height:1rem;   //1920像素等于100px
}

优点：稳定，只需要一套css媒体查询更改根元素的字体大小即可，设置多组分辨率，可实现窗口的放大缩小时字体大小、盒子大小跟着等比缩放，对比使用px单位而言，px需要设置多套不同像素下的各个元素间的公共样式文件，多套媒体查询，做不到全是响应式页面。

缺点：媒体查询的通病，改变字体会突然变大，变小。只能多设置几套分辨率对应不同的根元素字体尺寸，肉眼见不到“突然变大变小”，然后加上 transition: font-size 0.3s ease; /* 设置字体大小变化的过渡效果 */ ，实现平滑的效果，而不会突然变大变小。

2.使用 calc(100vw * 14/1920)

使用这个可以做到平滑的字体大小变化，只依赖视口宽度，跟分辨率无关，不需要设置媒体查询。

缺点1： 完全依赖视口宽高，会导致一个字体，在窗口变小1366分辨率往下，字体会变得特别小，需要单独设置到了某个最大宽度时的字体大小，就不会变化。

缺点：px原型图转换vh和vw困难。

//1920分辨率下
//定义公共的大小
$font-size-12：calc(100vw * 12/1920) //等于12px
$font-size-14：calc(100vw * 14/1920) //等于14px
$font-size-16：calc(100vw * 16/1920) //等于16px
$font-size-18：calc(100vw * 18/1920) //等于18px

$div-40: calc(100vw * 40/1920) //等于40px
$div-45: calc(100vw * 45/1920) //等于45px

3.使用px和媒体查询

有多少套像素就设计多少套公共class，并且vue文件里面的css需要响应式的话就又需要单独写媒体查询。

平滑也解决不了。