css字体大小自适应
时间: 2023-07-25 09:07:17 浏览: 311
CSS 实现div宽度根据内容自适应
可以使用CSS3的`vw`或`vh`单位,它们分别表示视口的宽度和高度的百分比。这样可以根据屏幕尺寸自动调整字体大小。
例如,将字体大小设置为视口宽度的5%:
```css
font-size: 5vw;
```
如果你想要更精细的控制,可以使用媒体查询来设置不同屏幕尺寸下的字体大小:
```css
/* 在视口宽度小于600px时,将字体大小设置为12px */
@media screen and (max-width: 600px) {
font-size: 12px;
}
/* 在视口宽度大于600px时,将字体大小设置为5vw */
@media screen and (min-width: 600px) {
font-size: 5vw;
}
```
这样可以根据不同设备的屏幕尺寸自动调整字体大小,提高用户体验。
阅读全文