如何使我的 HTML 页面响应？

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 的建议，我对引导程序进行了更多的调查。 我正在 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 中使用媒体查询来更改不同视口中的大小等。 以下将在 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-)、小视口（平板电脑）宽度的一半、中等视口（笔记本电脑）的三分之一和大视口（桌面屏幕）的四分之一。

Answer 2

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

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

如果您愿意，您可以在您的 javascript 中设置一个事件，该事件将在文档大小更改或加载时触发，它会根据您的输入为您自定义页面。 这可以通过单独选择元素并设置它们的 .styles 来完成。

此外，CSS 代码可以随着页面的更改而更改。 查看http://www.w3schools.com/css/css3_mediaqueries.asp

祝你的项目好运，祝你有美好的一天！

如何使我的 HTML 页面响应？

问题描述

2 个解决方案

解决方案1
0 2016-05-14 05:20:51

解决方案2
0 2016-05-14 05:25:00

如何使我的 HTML 页面响应？

问题描述

2 个解决方案

解决方案1 0 2016-05-14 05:20:51

解决方案2 0 2016-05-14 05:25:00

解决方案1
0 2016-05-14 05:20:51

解决方案2
0 2016-05-14 05:25:00