Question

我正在创建一个网页，当我调整窗口大小时，它开始变得混乱。文本更改其位置，依此类推。调整窗口大小后如何保持其美观？也许有一些视频课程？在此先感谢！

Answer 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) {
}

Answer 2

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

Answer 3

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

基本上，您可以设置“断点”以及这些断点所需的样式：

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

更多示例：w3schools: CSS Media Queries - Examples

调整大小时的页面可见性

3 个答案: