Question

我是响应式网页设计的新手。我想要的输出是div标签当屏幕宽度小于500像素时，其中包含深蓝色，浅蓝色，绿色，红色应按堆叠顺序显示，即如此图像media query less than 500px。

当屏幕宽度大于500px时，它应显示与代码段输出相同。但第一个显示如下wrongly displayed for screen < 500px。

第一个可以通过最小化浏览器获得。我使用的html和css是.pls告诉我为什么它不是浅蓝色和绿色。

.container{

  display:flex;
  flex-wrap:wrap;
}

.box{
  width:100%;
  min-height: 150px;
}

.dark-blue {
  background-color: blue;
  }
.light-blue {
  background-color: skyblue;
}
.green {
  background-color: #0C8542;
}
.red {
  background-color: #EC1D3B;
}

@media screen and (min-width:500px)
{
#container2
{
  width:50%;
}
.dark-blue
{
  width:50%;
}
}

<!DOCTYPE html>
<html>
<head>
<title>Layout Shift</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link type="text/css" rel="stylesheet" href="main.css">
</body>
<div class="container">
    <div class="box dark-blue"></div>
<div class="container" id="container2">
      <div class="box light-blue"></div>
        <div class="box green"></div>
      </div>
     <div class="box red"></div>
</div>
</body>
</html>

Answer 1

这看起来怎么样？ http://codepen.io/panchroma/pen/NRZMZR

HTML没有改变，在CSS中我已经在@media查询中移动了.container样式。更改的最终结果是，在视口宽度小于500px时，.container显示为block，每个div为全宽。

希望这有帮助！

<强> CSS

.box{
  width:100%;
  min-height: 150px;
}

.dark-blue {
  background-color: blue;
  }
.light-blue {
  background-color: skyblue;
}
.green {
  background-color: #0C8542;
}
.red {
  background-color: #EC1D3B;
}

@media screen and (min-width:500px){
  .container{
    display:flex;
    flex-wrap:wrap;
  }

  #container2{
    width:50%;
  }
  .dark-blue{
    width:50%;
  }
}

响应式网页设计使用布局转换

1 个答案: