使用媒體查詢時更改顯示樣式不起作用

Question

我已經編寫了兩種不同類型的CSS顯示樣式（一種用於Flex，一種用於網格），並且每一種都應隨着屏幕尺寸的改變而不同地應用。 我首先制作了移動版，然后制作了台式機版。 下面是移動版本的html＆CSS代碼，它按預期顯示。

@media (max-width: 400px) {
  .container {
    background-color: lavender;
    display: flex;
    justify-content: center;
  }

  .header {
    background-color: rgb(255,80,100);
  }

  header {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .p {
    background-color: #5ABFF6;
  }

  p {
    font-size: 40px;
    padding: 95px;
    font-weight: bold;
  }

  .aside1 {
    background-color: #F8D557;
  }

  .aside1_1 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .aside2 {
    background-color: #EA77B1;
  }

  .aside2_2 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .footer {
    background-color: #AAE89D;
  }

  footer {
    font-size: 80px;
    padding: 100px;
    font-weight: bold;
  }
}

<body>
    <div class="container header">
        <header> Header </header>
    </div>
    <div class="container p">
        <p>But Apple is clearly disappointed with
           itself over this whole thing. It’s a humbling embarrassment
           for a company that so often highlights its focus on user
           security and privacy. "Security is a top priority for every
           Apple product, and regrettably we stumbled with this 
           release</p>
    </div>
    <div class="container aside1">
        <div class="aside1_1">Aside1</div>
    </div>
    <div class="container aside2">
        <div class="aside2_2">Aside2</div>
    </div>
    <div class="container footer">
        <footer>Footer</footer>
    </div>

但是，如果我附加第二個CSS代碼（用於桌面屏幕尺寸），即使我將寬度縮小到400像素以下，頁面布局也會變得混亂。 以下是完整的CSS代碼。

@media (max-width: 400px) {
  .container {
    background-color: lavender;
    display: flex;
    justify-content: center;
  }

  .header {
    background-color: rgb(255,80,100);
  }

  header {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .p {
    background-color: #5ABFF6;
  }

  p {
    font-size: 40px;
    padding: 95px;
    font-weight: bold;
  }

  .aside1 {
    background-color: #F8D557;
  }

  .aside1_1 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .aside2 {
    background-color: #EA77B1;
  }

  .aside2_2 {
    font-size: 80px;
    padding: 95px;
    font-weight: bold;
  }

  .footer {
    background-color: #AAE89D;
  }

  footer {
    font-size: 80px;
    padding: 100px;
    font-weight: bold;
  }
}

@media (min-width:400px) {
  body {
    background-color: lavender;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 25% 50% 25%;
    text-align: center;
    height: 800px;
  }

  .header {
    background-color: rgb(255,80,100);
    grid-column: 1 / 4;
    padding-top: 50px;
  }

  header {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
  }

  .p {
    background-color: #5ABFF6;
    grid-column: 2 / 3;
  }

  p {
    font-size: 30px;
    padding: 20px;
    font-weight: bold;
  }

  .aside1 {
    background-color: #F8D557;
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .aside1_1 {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
  }

  .aside2 {
    background-color: #EA77B1;
  }

  .aside2_2 {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
  }

  .footer {
    background-color: #AAE89D;
    grid-row: 3 / 4;
    grid-column: 1 / 4;
  }

  footer {
    font-size: 40px;
    padding: 20px;
    font-weight: bold;
    padding-top: 70px;
  }
}

Answer 1

因為CSS從TOP應用於BOTTOM 。

這意味着最后設置的規則將被執行。

因此，請始終將媒體查詢放在CSS的底部，例如

.container {
  /* your desktop styles goes here */
}

@media (max-width: 400px) {
  .container {
    /* your media styles goes here */
  }
}

更新

還要看看這個，為什么我必須將媒體查詢放在樣式表的底部？

Answer 2

我看到一個較小的細節，即在400像素視口中，兩個媒體查詢都適用，可能不是您想要的。

您可能需要考慮以下更改：

@media (max-width: 400px) {  
...
}    

@media (min-width:401px) {
...
}

我不認為您的問題與CSS的順序有關。

我在https://codepen.io/panchroma/pen/qVQQoG上有您的HTML和CSS的精確副本，移動/桌面布局對我來說似乎很好。

我在這支筆中所做的一個補充是，我在標題中添加了一個視口元標記

<head> 
   ...
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   ...
</head>

如果您的代碼中沒有此meta標簽，請添加它，看看是否有幫助。

另外，您的頁面上除了發布的內容之外還有其他CSS嗎？

祝好運！

使用媒體查詢時更改顯示樣式不起作用

問題描述

2 個解決方案

解決方案1
1 2017-11-30 10:14:42

解決方案2
0 已采納 2017-11-30 12:14:57

使用媒體查詢時更改顯示樣式不起作用

問題描述

2 個解決方案

解決方案1 1 2017-11-30 10:14:42

解決方案2 0 已采納 2017-11-30 12:14:57

解決方案1
1 2017-11-30 10:14:42

解決方案2
0 已采納 2017-11-30 12:14:57