网站在调整大小时自动适应屏幕答案

【问题标题】：Site auto fit to screen on resize网站在调整大小时自动适应屏幕
【发布时间】：2021-11-05 23:54:24
【问题描述】：

我找到了一个Jacekjeznach site，在调整大小时布局适合屏幕大小：

我想知道第一个是如何工作的？它如何自动适应屏幕。

当容器高度设置为 100vh 但在调整大小时，我发现这很奇怪，至少对我来说它看起来不像是 100vh，而且字体大小和内容在调整大小时根本没有改变。之前，我一直在使用媒体查询并不断调整一些东西的大小以适应。

当我尝试将容器高度设置为 100vh 并调整其大小时，结果看起来不像第一个图像，而是第二个图像。

解释对我有很大帮助。感谢您的宝贵时间。

【问题讨论】：

【解决方案1】：

首先，您尝试学习这些许多人缺乏的核心内容真是太神奇了。您可以通过多种方式实现此结果，其中一种我觉得方便且始终对我有用的方法是使用 CSS 框架，例如 Bootstrap。

Bootstrap 基本上适用于列和行，当然还有容器，它们会根据页面大小自动调整大小。

列和行的概念并不新鲜，但令人惊奇的是，Bootstrap 为您完成了大部分工作，您只需要告诉列在网站或设备的大小，应该是什么大小那个特定的列。

例如，假设您有一行 3 列，现在您不想手动完成大部分工作，因为您必须给引导类一个命令，如果我想要一列如果屏幕尺寸小于 400 像素，则为全宽，那么我会说，

<div class="col col-sm-12"></div>

最好的部分是它们会在移动设备上自动堆叠。我强烈建议您学习这些技术/框架。

编辑：这是一个非常广泛的话题，我建议您阅读完全致力于响应性的 youtube 上的文章或观看视频。

【讨论】：

【解决方案2】：

这个功能唯一的魔力就是这个

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

在响应式网站中可用。另一个网站似乎没有这个元标记，或者它被某种方式掩盖了

有关元标记的更多信息，请在此处阅读更多内容href

【讨论】：