Html 如何让我的网站自动调整以适应不同的屏幕尺寸？

我正试图让我的网站自动调整以适应用户的屏幕，包括更小的屏幕，比如iphone5s。一切都是在24英寸屏幕上创建的，显示器分辨率为2560 x 1440

我创建了一个容器块，它保存所有内容并居中。 我目前使用的CSS如下：（背景是以内容为中心的块的CSS，.container包含整个HTML。） 现在，iphone5上的屏幕似乎被放大了，为了查看内容，用户必须向右滚动。我前几天也在另一台计算机上测试过，它也有同样的问题。此外，我在HTML中使用了这个元标记：

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

---

为了节省大量时间，我强烈建议使用Bootstrap的网格系统。它允许您定义多个div宽度，可以根据您的定义“堆叠”或“拉动”。有一个很短的学习曲线，但它是最容易处理开箱即用的自适应调整大小的曲线

网格基于12列系统。因此，如果在4列中定义一个网格，则第二个（或第三个或第四个）网格例如，必须添加到8。列根据屏幕宽度自动调整，但屏幕上始终有12列。您可以告诉它在移动大小的div中更改为12列，例如，只需在类中添加第二个定义，其中包含列x。所有这些都定义得非常好

例如，在小型设备上，具有2/3rds、1/3布局的流体容器将以100%的速度折叠为1/1 div：

<div class="container-fluid">
  <div class="row">
     <div class="col-md-8 col-xs-12">bigger</div>
     <div class="col-md-4 col-xs-12">smaller</div>
  </div>
</div>

更大的
更小

这里存在一些问题。在移动设备上，尤其是带有视网膜屏幕的iOS设备上，它以正常像素值的2倍渲染所有内容。例如，iPhone 4s有640像素宽，但仅显示为320像素宽。 此外，还有视口的概念。网上有很多关于这方面的资料，因此与其重新解释它，不如查看以下URL更好地解释它，并提供示例：

TLDR： 将以下内容添加到html页面的标题中

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

干杯

编辑：

---

<> P>关于使用%值缩放到屏幕的布局平台，而不是硬像素值（很好地与像iPad一样的最大1024px宽的设备相比较），或者根据屏幕大小来改变容器宽度的CSS媒体查询的其他答案也是建立响应时要考虑的好事情。（谷歌术语）网站。

你需要阅读一些“媒体查询”的内容，也许还需要看看一些响应性的图书馆（Twitter引导等）。简单地放大你的网站并不会减少它。谢谢你！所有这些答案都很有帮助。

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