如何使用@media查询为特定宽度范围调整html中的字体大小



只有当宽度大小在769px到991px 范围内时,我才想使用@media query调整HTML中的字体大小

@media only screen and (min-width: 769px) and (max-width: 991px) {
.most-1 h5 {
font-size: 5vm;
}
}
<div class="most-1">
<h5>Hello World!</h5>
</div>

css中没有名为vm的东西,您可以使用vwvh

您可以在该链接中查看css单元https://css-tricks.com/fun-viewport-units/

检查以下示例。。。

.most-1 h5 {
font-size: 50px;
}
@media only screen and (min-width: 269px) and (max-width: 991px) {
.most-1 h5 {
font-size: 1vw;
}
}
<div class="most-1">
<h5>Hello World!</h5>
</div>

vmax和vmin在单元中。样本单元

此处为示例代码

这里使用px单位。

font-size: 12px;

vmax和vmin(https://www.w3schools.com/cssref/css_units.asp)如果你需要你可以指定自定义字体大小h1标签,这不是强制性的

.most-1 h5 {
font-size: 50px;
}
@media only screen and (min-width: 269px) and (max-width: 991px) {
.most-1 h5 {
font-size: 1vw;
}
}

希望它有用,也可以使用css完成。文本大小可以用vw单位设置,即"视口宽度"。这样,文本大小将跟随浏览器窗口的大小:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>
</body>
</html>

w3school 的示例

最新更新