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

【问题标题】：Resizing font to fit the current screen size on a website调整字体大小以适应网站上的当前屏幕大小
【发布时间】：2017-11-18 05:31:27
【问题描述】：

如果我为桌面屏幕设置了特定大小的字体，我是否可以使用 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>

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

【问题讨论】：

150px 似乎很小。此外，style 属性会覆盖 <style> 标记中的 CSS。不要使用该属性。
您在媒体查询中设置了min。这意味着所有设备的最小屏幕宽度为 150 像素。我猜你要找的是 max 。和 150 像素……太小了……据我所知，没有任何设备低于 320 像素并且可以访问互联网 :)
如果你不知道：有 fittextjs.com ，它可以做你想做的事（但它是一个 javascript）

标签： html css

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

在 CSS 中，您可以使用 vw（视口宽度）或 vh（视口高度）代替 px 来设置字体大小

在全页模式下打开代码sn-p，然后调整浏览器大小，你会看到文字大小根据屏幕大小是一样的

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

通常，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>

【讨论】：