Question

即使我将字体大小设置为px而不是em或％或类似的东西，当屏幕调整大小时，文本如何按比例调整大小？我很确定显示器上的像素不会改变尺寸...

当我将px值设置为在宽屏幕上看起来正常时，它会在手机等小屏幕上变得太小。我希望能够使用类似@media screen and (max-width: 1000px)的内容来指定文本在小屏幕上应该是什么，而不是单独缩小。

我做了一个非常简单的页面，以确保我之前没有做过任何事情。我的文字大小可以在普通的电脑屏幕上阅读：

但如果我将屏幕大小调整为小于1000px宽度，则文本会缩小，而不会指定新文本大小或使用em或％值。

文字应该填满空白区域的一半。

HTML：

<html>
<head>
<meta charset=\"UTF-8\">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="banner">
<div>
    <div class="t_banner">Banner</div>
    <div class="t_banner2">Banner sub text</div>
</div>
<div><span>Phone</span> <span>999-999-9999</span></div>
</div>
</body>
</html>

CSS：

body{margin: 0;}

.banner{background-color: #f0eedb; height: 185px; box-shadow: 0px 4px 15px #555;}

.t_banner{color: #413e3e; font-size: 50px; font-weight: 600; font-family: Roboto Condensed, serif; border-bottom: solid 3px #222;}
.t_banner2{color: #413e3e; font-size: 45px; font-weight: 500; font-style: italic; font-family: Roboto Condensed, serif;}

修改我通过移除高度进行实验：185px;来自.banner样式。然后我在横幅上添加了一些文字：

我还添加了一个

，其中没有样式。横幅文字仍然会调整大小，但手机和底部的

“text”不会。

现在，如果我删除额外的“横幅子文本”或带回“高度185px”，那么包括完全不相关的p文本在内的所有内容都会变得微不足道。此时一切似乎都是随机的，我只有2个文件，每个文件有几行

Answer 1

我认为让你失望的是你在文档的头部没有视口元标记，如果没有这个标签，默认情况下，移动设备通常会缩放页面以适应屏幕。

缩放页面通常包括缩放图像，如您所见，缩放字体大小。

要验证此项，请检查此codepen：https://codepen.io/panchroma/pen/MERRxy

如果您在任何设备上访问https://s.codepen.io/panchroma/debug/MERRxy/wQAPoZQNRWer处的实时视图，我认为您会发现这些字体是完整尺寸且不会缩小。

此示例的HTML和CSS与您在上面发布的完全相同，只是我在页面的头部添加了一个视口元标记。您会看到，如果您注释掉此标记，字体大小将在实时视图中缩小。

有关viewport元标记的更多信息：
https://www.w3schools.com/css/css_rwd_viewport.asp

希望这有帮助！

HTML

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta charset="UTF-8">
<!-- <link rel="stylesheet" type="text/css" href="styles.css" /> -->
</head>
<body>
<div class="banner">
<div>
    <div class="t_banner">Banner</div>
    <div class="t_banner2">Banner sub text</div>
</div>
<div><span>Phone</span> <span>999-999-9999</span></div>
</div>
</body>
</html>

CSS

body{margin: 0;}

.banner{background-color: #f0eedb; height: 185px; box-shadow: 0px 4px 15px #555;}

.t_banner{color: #413e3e; font-size: 50px; font-weight: 600; font-family: Roboto Condensed, serif; border-bottom: solid 3px #222;}
.t_banner2{color: #413e3e; font-size: 45px; font-weight: 500; font-style: italic; font-family: Roboto Condensed, serif;}

CSS HTML当我在px中指定宽度时，为什么根据屏幕宽度调整大小？

1 个答案: