Css 字体设置响应式,随页面分辨率增大字体变大
时间: 2023-08-16 22:15:42 浏览: 87
要实现字体随页面分辨率增大而变大的响应式效果,可以使用 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字体随分辨率自己变大变小
可以使用CSS3中的`@media`规则和`rem`单位来实现根据设备分辨率自动调整字体大小的效果。
首先,需要在HTML中设置一个基准字体大小,可以使用`html`选择器来设置:
```css
html {
font-size: 16px;
}
```
然后,可以使用`rem`单位来设置字体大小,`rem`单位是相对于根元素的字体大小而言的,如下所示:
```css
p {
font-size: 1rem;
}
```
接下来,可以使用`@media`规则来设置不同分辨率下的根元素字体大小,例如,可以在分辨率小于600px的设备上将根元素字体大小设置为14px:
```css
@media (max-width: 600px) {
html {
font-size: 14px;
}
}
```
这样,在不同分辨率下,字体大小就会自动调整,以适应不同的设备。
css 根据分辨率 判断使用vh还是vw来设置字体大小
可以使用媒体查询来根据分辨率来设置字体大小,例如:
```
@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`。当然,根据实际需求也可以使用其他单位来设置字体大小。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)