Question

作为测试，我创建了4列（具有相应的颜色），每列有25％的宽度。我把它们浮起来，以便它们并排遍布整个页面。

我想使用媒体查询，以便在视口变得足够小的情况下并排只有两列，如果视口更小，则每行一列。我只是在一个HTML文档中执行此操作，因为我并不真正关心创建一个附带的CSS文档。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        @media only screen and (max-width: 787px) {
            .column1, .column2, .column3, .column4 {
                width: 50%;
            }
        }

        @media only screen and (max-width: 420px) {
            .column1, .column2, .column3, .column4 {
                width: 100%;
            }
        }

        .column1, .column2, .column3, .column4 {
            width: 25%;
            height: 300px;
        }
        .column1 {
            background-color: red;
            float: left;
        }
        .column2 {
            background-color: blue;
            float: left;
        }
        .column3 {
            background-color: yellow;
            float: right;
        }
        .column4 {
            background-color: black;
            float: right;
            color: white;
        }
    </style>
</head>

<body>
    <div class="column1">
        <p>breakfast</p>
    </div>

    <div class="column2">
        <p>lunch</p>
    </div>

    <div class="column3">
        <p>dinner</p>
    </div>

    <div class="column4">
        <p>snack</p>
    </div>
</body>

我觉得我在做一些令人难以置信的错误。提前谢谢。

Answer 1

媒体查询应低于您的CSS样式而不是它们之上。检查这个小提琴〜https://jsfiddle.net/g4j4ewpp/

.column1,
  .column2,
  .column3,
  .column4 {
    width: 25%;
    height: 300px;
  }

  .column1 {
    background-color: red;
    float: left;
  }

  .column2 {
    background-color: blue;
    float: left;
  }

  .column3 {
    background-color: yellow;
    float: right;
  }

  .column4 {
    background-color: black;
    float: right;
    color: white;
  }

  @media only screen and (max-width: 787px) {
    .column1,
    .column2,
    .column3,
    .column4 {
      width: 50%;
    }
  }

  @media only screen and (max-width: 420px) {
    .column1,
    .column2,
    .column3,
    .column4 {
      width: 100%;
    }
  }

Answer 2

GvM提供答案的解释 -

浏览器从上到下解析代码。你可能有两千个

@media only screen and (min-width: 748px){
    .class {
        background-color: some-color;
        height: some-height;
     }
}

语句。只要它们都是相同的高度，最后一个将生效，之前的所有都将被忽略。

另外，假设您有三个查询设置了您可能需要的特定属性（如果它是中等大小），如果它是一个大尺寸则设置一个额外属性。

@media only screen and (min-width: 320px) {
    /*give a div 40px height and blue text*/
    .this-div {
        color: blue;
        height: 40px;
        background-color: lemonchiffon;
    }

    /*declare a div, but hide it until the screen is big enough*/
    .hidden-div {
        display: none;
        width: 50%;
        background-color: orange;
    }
}

@media only screen and (min-width: 480px) {
    /*style a different div to have blue text and assign it height*/
    .that-div {
        color: blue;
        height: 30%;
        background-color: magenta;
    }

    /*change the first div's font to red, but keep its height the same*/
    .this-div {
        color: red;
    }

@media only screen and (min-width: 748px) {
    /*change the first div's font again, and now it takes up the entire screen.*/
    .this-div {
        color: green;
        height: 100%;
    }

    /*split the second div and a new third div*/
    .that-div {
        width: 50%;
    }

    .hidden-div {
        display: inline;
    }
}

所有媒体查询的背景颜色保持不变。但是，根据最近接受的查询，高度和宽度可能会发生变化 - 具体取决于视口的大小。

使用媒体查询根据视口移动列？

2 个答案: