Question

我已经创建了一个HTML页面，我想让它响应。我看过w3schools，但没有弄清楚如何让它响应。我只是添加了一行

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

但它不会使文本响应。我知道我必须添加一些内容，但无法弄清楚是什么。

这是我的代码：

<!doctype html>
<title>Test page</title>
<head>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <style>
      h1 { font-size: 50px; }
      body { font: 20px Helvetica, sans-serif; color: #333; background: #eaeaea;text-align: center; padding: 150px;}
      article { display: block; text-align: left; width: 650px; margin: 0 auto; }
      a { color: #dc8100; text-decoration: none; }
      a:hover { color: #333; text-decoration: none; }
    </style>
</head>

<article>
        <h1>This is a test page</h1>
        <div>
            <p>
            Test page that I made for fun. I would like to be able to code. <a href="mailto:#">Send me an email (not working)</a></p>
            <p>&mdash; Alessio</p>
        </div>
</article>

编辑：

目前我正在玩

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

如果没有这一行，整个文本都适合移动设备，但非常小。因此页面缩小以适应屏幕。
使用该行，文字大小合适，但不适合屏幕。

我需要一些东西，以便我可以保持文字大小，但根据屏幕尺寸使其适合。

我不想使用库。我想直接在页面中编写代码（如果可能的话）。

编辑2：按照@elhampour和@gavgrif的建议我已经调查了更多的bootstrap。我正在freecodecamp.com上做一门课程，现在我对这个建议有了更多的了解。目前代码是

<!doctype html>
<title>Coming Soon</title>
<head>
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<div class="container-fluid">
 <h1 class="text-primary text-center">We&rsquo;ll be online soon!</h1>
 <img class="img-responsive col-sm-6 col-md-4 col-lg-3" src="https://livetogether.xyz/images/LT-header-alpha-flip.ico" alt="livetogether.xyz">
 <p>If you need to you can always <a href="mailto:#">contact us</a>, we&rsquo;ll get back to you shortly!</p>
 <p>&mdash; LiveTogether Team</p>
</div>

现在我正在寻求文本回应

Answer 1

您需要在CSS中使用媒体查询来更改不同视口中的sizings等。以下将在高于768px的屏幕上将h1设置为50px，对于等于或低于768px的屏幕将h1设置为30px：

@media (max-width: 768px) {
   h1 { font-size: 30px; }
    }

@media (min-width: 769px) {
   h1 { font-size: 50px; }
    }

如@elhampour所述 - 调查Bootstrap，然后您可以更改布局以及尺寸等：

 <div class="col-sm-6 col-md-4 col-lg-3">
  <p>test content 1</p>
</div>

这将显示为移动设备的完整视口（col-xs-），小视口（平板电脑）的一半宽度，中型视口（笔记本电脑）的三分之一和较大视口的四分之一（descktop屏幕））。

Answer 2

您想要添加什么？如果以下内容未回答您的问题，请评论我的问题。

首先，html页面已经响应。随着页面大小的变化，您的div会改变其大小。默认情况下，无法使文字大小适合屏幕，但您可以使用如下库：https://plugins.jquery.com/textfill/

如果您愿意，您可以在javascript中触发一个事件当文档的大小发生变化或加载时，它会根据您的输入自定义您的页面。这可以通过单独选择元素并设置其样式来完成。

另外，可以在页面更改时更改css代码。看看http://www.w3schools.com/css/css3_mediaqueries.asp
祝你的项目好运，祝你有个美好的一天！

如何让我的HTML页面响应？

2 个答案: