CSS隨媒體屏幕大小變化

Question

我正在嘗試為網站構建一個簡單的模板。 我已經在下面的鏈接中包含了所有代碼，但只是為了提供一個想法，我嘗試在max-width：600px;時更改2個flex項目的布局。

當前的布局如下：

這是一個標頭，具有簡單的Flex設置，左邊是Flex：1（綠色），藍色是Flex：2。

我希望做的是，如果max-width <600px，然后將綠色部分置於藍色之上，並使它們具有相同的大小。 這是我的html和CSS，還添加了指向我的codePen的鏈接

HTML：

<body>
 <div class="top">

 </div>
 <div class="wrapper">
 <div class="left">
  <div class="logo">
  </div>
  <div class="menu">
  </div>
</div>
  <div class="mainContent">

  </div>
</div>

</body>

我的CSS看起來像這樣：

.left{
flex:1;
height:auto;
background-color: green;
background-position: fixed;
}
.mainContent{
 flex:2;
 background-color:blue;
 height:100px;
}
@media screen and (max-width: 600px){
.mainContent{
  background-color: pink;
}
.wrapper{ <---- Here it's turning both the Green & blue into pink (doing this as test)
  flex-direction: column;
}
}

所以我試圖通過設置

.wrapper{
flex:direction:column 
}

但這會將整個綠色和藍色行變成粉紅色。

知道我如何格式化它，使綠色超過藍色並且它們的大小相同嗎？ 我正在嘗試使此移動設備友好。

LinktoCodepen

Answer 1

使用媒體查詢將兩個元素的width設置為100％。

然后使用flex-wrap和order屬性將元素放置在正確的位置。

您的CSS大致如下所示：

  body{
    background-color: #ccc;
    margin:0px;
    padding:0px;
  }
  .top{
    margin:0px;
    padding:0px;
    width:100%;
    height:100px;
    background-color: yellow;
  }
  .wrapper{
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    width: 100%;
  }
  .left{
    flex:1;
    height: 100px;
    background-color: green;
    background-position: fixed;
  }
  .mainContent{
    flex:2;
    background-color:blue;
    height:100px;
  }
  @media screen and (max-width: 600px){
    .mainContent{
      background-color: pink;
      min-width: 100%;
    }
    .left {
      min-width: 100%;
    }
  }

這是更新的代碼筆： https ://codepen.io/anon/pen/pWMymE

CSS隨媒體屏幕大小變化

問題描述

1 個解決方案

解決方案1
0 已采納 2017-10-25 15:42:20

CSS隨媒體屏幕大小變化

問題描述

1 個解決方案

解決方案1 0 已采納 2017-10-25 15:42:20

解決方案1
0 已采納 2017-10-25 15:42:20