Question

我正在使用流畅的设计构建一个非常基本的网站，因此在确定div的宽度时使用百分比而不是像素值。

当我调整浏览器大小或屏幕尺寸发生变化时，div不会移动，它们只会调整为浏览器的形状...因此，当浏览器更改大小时，我希望row1位于顶部，然后col1在它自己的行上，然后col2在它的行等等，我已经用尽了大部分的东西，甚至试图从其他民族的帖子中反向设计它们希望他们的div留下来，ny帮助会很棒，因为这太烦人了:)）

HTML

    <DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="layout.css">
</head>

<header>
    <div class="navbar">

    </div>
</header>

<body>
        <div class="row1">

        </div>
        <div class="row2">
            <div class="col1">

            </div>

            <div class="col2">

            </div>
        </div>
        <div class="row3">
            <div class="col2">

            </div>

            <div class="col1">

            </div>
        </div>  
</body>


<footer>

</footer>

CSS

    * {
    margin:0;
    padding:0;
}

.navbar {
    position:fixed;
    width:100%;
    height:75px;
    background-color: #c0f4de;
    top:0;
    left:0;
    right:0;
}

.row1 {
    margin-top:75px auto;
    background-color: #c0f4de;
    width:100%;
    height:500px;
}

.row2 {
    width:100%;
    height:500px;
}

.col1{
    width:50%;
    height:500px;
    background-color: #ffffff;
    float:left;
}

.col2 {
    width:50%;
    height:500px;
    background-color: #eeeeee;
    float: left;
}

Answer 1

尝试在CSS中使用media查询。 media查询严格针对不同的屏幕尺寸，因此会适当调整大小。它看起来像这样：

@media screen and (min-width: 400px) and (max-width: 500px) {
    .navbar {
        width: 75%;
    }
}

Answer 2

这是你的意思吗？

@media screen and (max-width: 770px) {
    .col1, .col2, .row1, .row2 {
        clear: left;
        width: 100%;
    }
};

另外，关于有人说有效代码的说法。我认为这不是问题所在。但是，如果您没有有效的代码，有时浏览器会执行意外操作。 W3学校有一个验证器可以检查代码是否有效： https://validator.w3.org/

Answer 3

你在这里的内容是 media queries 。

Media queries 只需在遇到某种情况时加载CSS。一个简单的开始是这样的：

.col1 {
   width: 100%;
}
.col2 {
   width: 100%;
}

@media all and (min-width: 640px) {

 /* Code that runs when browser width is at least 640px */

{


@media all and (min-width: 1140px) {

 /* Code that runs when browser width is at least 1140px */

 .col1 {
   width: 50%;
 }
 .col2 {
   width: 50%;
 }

{

稍后设置的CSS属性将覆盖以前的属性。如果这太费时间，您可以查看使用Bootstrap的{{1}}。

如何在调整浏览器/屏幕大小时使div移动

3 个答案: