仅在指定的媒体查询中显示部分

Question

我正在努力让我的网站响应，但我遇到了一个问题。我试图隐藏一个部分以使其仅 phone 可见，但是当我尝试为我的部分设置 display:none 并在我的媒体查询中启用它时，它被我的非覆盖媒体查询代码。

我想对 PC 用户隐藏的 2 个部分是 .phone-services 和 .avis-phone。问题是，正如我所说，如果我将它们声明为 display:none，它们将覆盖我的媒体查询。

这是我@media 的一部分 CSS:

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {

    .services {
        display:none !important;
    }

    .avis {
        display:none !important;
    }

    .phone-services {
        background:#02000A;
    }

    .avis-phone {
       background:#02000A;
       color:white;
   }
}

这里是覆盖它的另一个 CSS 的一部分：

@import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');

* {
    margin:0; padding:0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none; border:none;
    font-family: "Shippori Antique B1" , sans-serif;
    transition: .2s linear;

}

html{scroll-behavior:smooth !important}

a:visited{
    visibility:hidden;
}

.phone-services {
    display:none; /*Overwrites my media query*/
}

.avis-phone {
    display:none; /*Overwrites my media query*/
}

HTML:

<section class="phone-services">
   Section need to be shown only for mobile
</section>
<section class="avis-phone"> 
    Section need to be shown only for mobile
</section>

感谢您的帮助！

Answer 1

如果您根据@media 隐藏/显示它们，您总是必须定义display，包括@media 部分和非@media 部分。

尝试将其添加到规则中：

@media screen and ...

{

 .phone-services {
    background:#02000A;
    display: block; // can be block, inline-block, flex...
 }

 .avis-phone {
    background:#02000A;
    color:white;
    display: block; // can be block, inline-block, flex...
 }
}

请注意，如果您在正常加载之前加载了@media 部分，则必须确保在之后加载@media 部分，这样它就不会被覆盖，或者您可以使用 !important 规则（不推荐）。

Answer 2

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)

min-device-width 和 max-device-width 仅适用于实际设备。如果您尝试在桌面上模拟它，它对您不起作用。您应该改用 min-width 和 max-width。

其次，-webkit-min-device-pixel-ratio: 2是检查设备分辨率，但是我们有各种各样的设备，我们不能简单地用一个特定的分辨率来覆盖。我建议删除它。

另一个问题来自这里

.phone-services {
    background:#02000A;
}

.avis-phone {
   background:#02000A;
   color:white;
}

您设置了 display: none，但没有设置 display: block（或任何其他可见的显示值）

还有一点我想记下来，当它们有相同的选择器时，样式优先级是TOP到BOTTOM。您在media-query中的显示样式在display: none之上，如下所示，这也会导致显示问题

@media {
  .phone-services {
     display: block; /*NOT WORKING*/
  }
}
.phone-services {
    display:none;
}

完全可能的变化可以是

@import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  outline: none;
  border: none;
  font-family: "Shippori Antique B1", sans-serif;
  transition: 0.2s linear;

}

html {
  scroll-behavior: smooth !important;
}

a:visited {
  visibility: hidden;
}

.phone-services {
  display: none;
}

.avis-phone {
  display: none;
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {

  .services {
display: none !important;
  }

  .avis {
display: none !important;
  }

  .phone-services {
background: #02000A;
display: block;
  }

  .avis-phone {
background: #02000A;
color: white;
display: block;
  }
}

<section class="phone-services">
  Code in here
</section>
<section class="avis-phone">
  Code in here
</section>

仅在指定的媒体查询中显示部分

Show section only in specified media query

html

css

responsive