css 根据分辨率 判断使用vh还是vw来设置字体大小
时间: 2023-08-03 17:03:31 浏览: 55
可以使用媒体查询来根据分辨率来设置字体大小,例如:
```
@media (max-width: 768px) {
/* 在宽度小于等于 768px 时使用 vh */
body {
font-size: 5vh;
}
}
@media (min-width: 769px) {
/* 在宽度大于 768px 时使用 vw */
body {
font-size: 3vw;
}
}
```
在上面的示例中,我们使用 `max-width` 和 `min-width` 媒体查询来判断当前设备的宽度,并根据不同的宽度范围来设置不同的字体大小单位。在宽度小于等于 768px 时使用 `vh`,在宽度大于 768px 时使用 `vw`。当然,根据实际需求也可以使用其他单位来设置字体大小。
相关问题
Css 字体设置响应式,随页面分辨率增大字体变大
要实现字体随页面分辨率增大而变大的响应式效果,可以使用 CSS3 中的 @media 媒体查询和 vw/vh 视窗单位。
首先,可以在 CSS 中为字体设置一个基本的大小,例如:
```
body {
font-size: 16px;
}
```
然后,在 @media 媒体查询中根据页面宽度设置不同的字体大小。例如,当页面宽度大于等于 768px 时,可以将字体大小设置为 2vw:
```
@media screen and (min-width: 768px) {
body {
font-size: 2vw;
}
}
```
这样,当页面宽度增大时,字体大小也会随之增大。其中,vw 是相对于视口宽度的单位,1vw 等于视口宽度的 1%。
类似地,也可以使用 vh 视口高度单位实现高度响应式字体大小。
html字体根据分辨率自适应
可以使用CSS中的“vw”和“vh”单位实现根据分辨率自适应的字体大小。其中,“vw”表示视口宽度的百分比,“vh”表示视口高度的百分比。例如,设置字体大小为4vw,表示字体大小为视口宽度的4%。这样可以保证在不同分辨率的设备上,字体大小都能够自适应显示。另外,也可以使用媒体查询来根据不同的分辨率设定不同的字体大小。