Question

我正在努力让我的整个网页都可用于移动设备，我网页上的所有内容几乎都是响应式的，但是移动设备上的文字太小了，任何人都可以帮我解释一下： HTML：

<div class="main">
<section class="page" id="page1">
<div id="background">
<img src="images/background.png" alt="background">
</div>

<h1> </h1>

CSS：

h1 {
width: 50vw;
position: fixed;
top: 28vw;
left: 50vw;
text-align: center;
transform: translate(-50%, -50%);
font-size: 2.1vw;
font-family: 'Slabo 27px', serif;
font-style: italic;
color: white;
-webkit-animation: fadein 14s;
-moz-animation: fadein 14s;
-ms-animation: fadein 14s; 
-o-animation: fadein 14s; 
animation: fadein 14s;
}

（我在Javascript文件中设置了H1标签的文本）

如何制作h1标签，使文字在移动设备上看起来就像在桌面上一样？

Answer 1

您是否正确设置了视口？

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

您需要对移动断点进行媒体查询，才能将字体大小重置为更具可读性的内容，例如

@media only screen and (max-width: 768px) {
   h1 { font-size: 16px; }
}

Answer 3

您可以使用Media Queries。它们看起来像这样：

@media screen and (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
}

这表示在宽度高达600px的屏幕上，h1标签的字体大小为24px。此后，它将是2.1vw，如原始CSS中所定义。

您还需要添加

<meta name="viewport" content="width=device-width, initial-scale=1">

到<head>。

实际上，在媒体查询中使用max-width而非使用min-width更为理想。使用max-width时，首先编写桌面CSS，然后使用媒体查询缩小内容。这会带来许多特殊性问题，因为您不断覆盖有效的CSS - 导致使用!important，这很糟糕。使用min-width表示您为移动设备编写默认CSS，然后在向上扩展浏览器宽度时，媒体查询将启动，因为它们现在有效。这称为"mobile first"方法。

请求移动网站的代码示例

3 个答案: