css字体怎么随屏幕大小变化

CSS字体可以根据屏幕大小自动调整，使得网页内容在不同的分辨率下都能得到良好的展示效果。下面介绍几种常用的方法：

/* 1. 使用百分比设置字体大小 */
body {
    font-size: 100%;
}

h1 {
    font-size: 3em; /* 3em相当于300% */
}

p {
    font-size: 1.2em; /* 1.2em相当于120% */
}

/* 2. 使用容器宽度计算字体大小 */
.container {
    width: 90%;
    font-size: calc(12px + 0.5vw); /* 计算方式为12px+0.5%屏幕宽度 */
}

/* 3. 使用媒体查询设置不同屏幕下的字体大小 */
@media screen and (max-width: 600px) {
    body {
        font-size: 80%;
    }
}

@media screen and (min-width: 600px) and (max-width: 960px) {
    body {
        font-size: 100%;
    }
}

@media screen and (min-width: 960px) {
    body {
        font-size: 120%;
    }
}

这些方法可以让网页内容在响应式设计中具备更好的可读性和可用性，使得用户能够轻松阅读和操作。