Question

此媒体查询应在屏幕宽度500px时将id为container2的div设置为50％。该div中有light_blue和green框。

这是jsfiddle https://jsfiddle.net/ofey/1yo4ck9e/1/

解决方案：https://jsfiddle.net/ofey/1yo4ck9e/18/

还有CSS媒体查询，

@media screen and (min-width: 500px) {
      #boxA {
        order: -1;
        width: 50%;
      }
      .container2 {
        width: 50%;
      }
      #boxB {
        order: 1;
      }
    }

    @media screen and (min-width: 600px) {
      #boxC {
        order: -1;
      }
      #boxB {
        width: 25%;
        order: 2;
      }
      .container2 {
        width: 50%;
      }
      #boxA {
        width: 25%;
        order: 1;
      }
    }

和html

<div class="container">
    <div class="box" id="boxA">
      <p>red</p>
    </div>
    <div class="container" id="container2">
      <div class="box" id="boxD">
        <p>light_blue</p>
      </div>
      <div class="box" id="boxC">
        <p>green</p>
      </div>
    </div>
    <div class="box" id="boxB">
      <p>dark_blue</p>
    </div>
  </div>

我不明白为什么它不起作用。

预期结果是它看起来像是500px，

谢谢

Answer 1

在CSS中，由于使用ID，因此将.container2更改为#container2。

#container2 {
    width: 50%;
}

如果您还希望容器位于图像的右侧，请添加order: 3;

#container2 {
    order: 3;
    width: 50%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>media queries</title>
  <style type="text/css">
    .container {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .box {
      width: 100%;
      text-align: center;
    }

    #boxB {
      background: darkblue;
      color: white;
    }

    #boxD {
      background: lightblue;
    }

    #boxC {
      background: green;
    }

    #boxA {
      background: red;
    }

    @media screen and (min-width: 500px) {
      #boxA {
        order: -1;
        width: 50%;
      }
      #container2 {
        width: 50%;
        order: 3;
      }
      #boxB {
        order: 1;
      }
    }

    @media screen and (min-width: 600px) {
      #boxC {
        order: -1;
      }
      #boxB {
        width: 25%;
        order: 2;
      }
      #container2 {
        width: 50%;
        order: 3;
      }
      #boxA {
        width: 25%;
        order: 1;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box" id="boxA">
      <p>red</p>
    </div>
    <div class="container" id="container2">
      <div class="box" id="boxD">
        <p>light_blue</p>
      </div>
      <div class="box" id="boxC">
        <p>green</p>
      </div>
    </div>
    <div class="box" id="boxB">
      <p>dark_blue</p>
    </div>
  </div>
</body>

Flexbox的媒体查询问题

1 个答案: