调整大小时的页面可见性答案

【问题标题】：Page visibility when resizing调整大小时的页面可见性
【发布时间】：2018-06-19 20:20:46
【问题描述】：

我正在创建一个网页，当我调整窗口大小时，它开始变得混乱。文本改变它的位置等等。即使在调整窗口大小后如何保持美观？也许有一些视频课程？提前致谢！！

【问题讨论】：

查看响应式网格系统，例如Bootstrap。（它在底层使用media queries，但提供了更易于使用的界面。）
顺便说一句，如果您提供minimal reproducible example，您可能会通过示例得到答案。

【解决方案1】：

提供大量视频课程。您可以通过“响应式布局”关键字进行搜索。但是你可以轻松摆脱。您所需要的只是标准的媒体查询。将此媒体查询放在 .css 文件的末尾，并根据您的屏幕尺寸开始设置样式。（例如，用于移动尺寸（最大宽度：767px）等。）

@media only screen and (max-width : 1200px) {
}
@media only screen and (max-width : 979px) {
}
@media only screen and (max-width : 767px) {
}
@media only screen and (max-width : 480px) {
}
@media only screen and (max-width : 320px) {
}

【讨论】：

【解决方案2】：

您正在寻找css media-queries 这是一个广泛的主题。所以我不能指出确切的目的地。但是 youtube 上有大量与这些主题相关的材料。您也可以尝试https://scrimba.com/ 进行互动教程。

【讨论】：

查看此标签media-queries 了解相关问题

【解决方案3】：

CSS 媒体查询可以提供帮助。它们让您可以在 CSS 中制定规则，了解您希望网页上的不同元素在屏幕尺寸发生变化时，或者在开始时显示在更小或更大的屏幕上时如何显示。这是一个很好的介绍：w3schools: CSS Media Queries。

基本上，您设置“断点”以及您想要为这些断点设置的样式：

@media screen and (min-width: 500px) {
    body {
        margin: 10px;
    }
}

【讨论】：