只有当宽度大小在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
的东西,您可以使用vw
或vh
您可以在该链接中查看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 的示例