Question

我已经编写了两种不同类型的css显示样式（一种用于flex和一种用于网格），并且每种都用于在屏幕大小更改时应用不同。我接着推出了移动版本和桌面版本。下面是移动版本的html＆amp; 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代码（用于桌面屏幕大小），即使我将宽度缩小到400px以下，页面布局也会变得混乱。下面是完整的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 */
  }
}

<强>更新

另请参阅此Why do I have to put media queries at the bottom of the stylesheet?

Answer 2

我看到一个小细节，在400px视口处你的两个媒体查询都适用，可能不是你想要的。

您可能需要考虑更改：

@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>

如果您的代码中没有此元标记，请添加它并查看是否有帮助。

此外，除了您发布的内容之外，您的网页中是否还有其他CSS？

祝你好运！

使用媒体查询时，更改显示样式不起作用

2 个答案: