Question

如果我将字体设置为桌面屏幕的特定大小，我可以使用CSS3 @media Rule减少它以适应移动设备吗？

我在下面有这行代码：

<style>
@media only screen and (min-device-width: 150px) {
.log {font-size: 10px}
}
</style>

<body>
<div class="log" style="font-size: 35px;">
HEADER TEXT<br />
</div>
</body>

但是当我在移动设备上打开网站时，它没有响应！我做错了什么???

Answer 1

您已将媒体查询设置错误。它为宽度大于150px的设备指定字体大小。您应该在媒体查询中使用max-width。这样做是将所需的css应用于该宽度的设备。例如：

@media only screen and (max-device-width: 920px) {
.log {font-size: 10px}
}

这会将font-size: 10px应用于宽度低于920px的设备。使用内联样式将覆盖css文件或style标记中的css。所以，避免这样做，并在css文件或样式标记中写下所有的CSS。我希望这能回答你的问题。

Answer 2

元素的内联样式覆盖了媒体查询。试试这个：

.log {
font-size: 35px;
}

@media only screen and (min-device-width: 150px) {
.log {font-size: 10px}
}

<body>
<div class="log">
HEADER TEXT<br />
</div>
</body>

Answer 3

在CSS而不是px中，您可以使用vw（视口宽度）或vh（视口高度）来确定字体大小

在整页模式下打开代码段，并调整浏览器大小，根据屏幕尺寸，您会看到文字大小相同

第一个文字永远不会分成两行，在较小的屏幕尺寸上会更小
当您更改浏览器高度时，第二个文本将更改字体大小

通常，vw将完成您所需的一切

<style>
.view-width {
	font-size: 5vw
}
.view-height {
	font-size: 10vh
}
</style>

<div class="view-width">Some text according to screen Width</div>
<div class="view-height">Some text according to screen Height</div>

调整字体大小以适应网站上的当前屏幕大小

3 个答案: