我的代码中的某些媒体查询是不起作用的，有关如何解决这个问题的任何建议？例如，320px和360px媒体查询不起作用

Question

320px媒体查询不起作用。 360PX媒体查询不起作用。 但是其他媒体查询正在起作用。 关于如何解决此问题的任何建议？

    body {
    font-family: "Trebuchet Ms", Cambria, "Times New Roman",  sans-serif;
}

.topnav {
    background-color: #333;
    width: 100%;
    position: fixed;
    top: 0px;
    margin-left: -9px;
}

.topnav a:hover {
    background-color: darkgreen;
    color: white;
    text-decoration: underline;
}

nav {
    margin: 33px;
    margin-top: 32px;
}

img#logo {
    width: 101px;
    float: left;
    margin-top: -15px;
    margin-left: -20px;
}

a.active {
    background-color: #04aa6d;
    color: white;
    text-decoration: none;
}

nav a {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
    font-size: 17px;
}

a.icon {
    display: none;
}

#right {
    float: right;
    margin-top: -16px;
}

.pastor {
    width: 1000px;
    margin-left: 275px;
    margin-top: -231px;
}

hr {
    border-top: 3px double #0193de;
    margin: 50px 0px 50px;  
}

ul {
    list-style-type: none;
}

#li {
    float: right;
    margin-top: -49px;
    margin-right: 15px;
}

li#li {
    padding: 10px 20px;
}

li#li a {
    color: whitesmoke;
    background-color: #04AA6D;
}

li#li a:hover {
    color: black;
}

#figure {
    display: flex;
    justify-content: center;
}

figure figcaption {
    text-align: center;
}

#events {
    background-color: #0193de;
    text-align: center;
}

.figure {
    text-align: center;
    display: inline-block;
    margin-left: auto;
    width: 350px;
    height: 424px;
}

.figure img {
    width: 350px;
    height: 424px;
}

figure figcaption {
    color: white;
}

#footer {
    background-color: #333;
    text-align: center;
    color: white;
}

#footer a{
    color: green;
}

#footer a:link {
    color: white;
}

#footer a:visited {
    color:  white;
}

#footer a:hover {
    background-color: darkgreen;
    text-decoration: underline;
}

#marg {
    margin-top: 25px;
    display: block;
}

/*This is the gallery section*/

#figs.figures {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.figures figcaption {
    color: black;
}

#pictures {
    background-color: #12954b;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pictures img {
    height: 700px;
    width: 437px;
}

#pictures figcaption {
    color: white;
}

/*This is the donate section*/

   .dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  width: 100%;
}

.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  width: 100%;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

abbr {
    text-decoration: underline;
}

/*This is the contact section*/
.margin {
    margin-top: 100px;
    text-align: center;
}

.margin2 {
    text-align: center;
}

input:focus {
        border: 3px solid #0193de;
    }
    input {
        width: 51%;
        padding: 12px 20px;
        margin: 8px 1px;
        box-sizing: border-box;
        border-right-color: #0193de;
    }
   textarea {
        width: 51%;
        height: 100px;
        padding: 12px 20px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        resize: none;
        border-right-color: #0193de;
    }

.submit {
      background-color: #04AA6D;
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px;
      cursor: pointer;
      width: 50.8%;
    }
    .reset {
      background-color: red;
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px;
      cursor: pointer;
      width: 50.8%;
    }

@media screen and (min-width: 320px) {
body {
    font-family: "Trebuchet Ms", Cambria, "Times New Roman",  sans-serif;
}
.topnav {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    width: 100%;
    top: 0px;
    margin-left: -9px;
}
.topnav a{
    float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
    background-color: #04AA6D;
    color: black;
    text-decoration: underline;
}
.topnav a.active {
    background-color: darkgreen;
    color: white;
}

.topnav a:visited {
    color: dodgerblue;
}

.topnav .icon {
    display: none;
}
img#logo {
    width: 70px;
}

nav {
        margin: 12px;
    margin-top: 0px;
}

#right {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-right: 79px;
}

#p {
    display: inline-block;
}

.pastor {
    width: 300px;
    margin-top: -26px;
    margin-left: 23px;
}

hr {
    width: 100%;
    border-top: 3px double #0193de;
    margin: 50px 0px 50px;
}

ul {
    list-style-type: none;
}

ul li {
    display: inline-block;
}

#il {
    margin-left: -34px;
    margin-top: -2px;
}

#li {
    float: right;
    margin-top: 20px;
    margin-right: 2px;
}

#li a {
    text-align: center;
    color: whitesmoke;
    background-color: #04AA6D;
}

li#li {
    padding: 0px;
}

#figure {
    display: flex;
    flex-direction: column;
}

.iframe {
    margin-left: 0px;
    width: 250px;
}

#figure figcaption {
    color: black;
}

figcaption {
    text-align: center;
}

#events {
    background-color: #0092dc;
    text-align: center;
}

.figure {
    margin-left: 25px;
    width: 250px;
}

.figure img {
    width: 350px;
    margin-left: 0px;
}

.figure figcaption {
    color: white;
    text-align: center;
}

#footer {
    background-color: #333;
    text-align: center;
    color: white;
}

#marg {
    display: block;
    margin: 20px 0px;
}

#downnavbar a:link {
    color: white;
}

#downnavbar a:visited {
    color: dodgerblue;
}

#downnavbar a:hover {
    text-decoration: underline;
}

#downnavbar a {
    text-decoration: none;
}

#downnavbar a.active {
    background-color: transparent;
}

#downnavbar a:hover {
    background-color: transparent;
}

#marg .fa-brands{
    color: #269f5b;
}

#footer address a {
    color: green;
}

address {
    margin-top: 10px;
}

@media screen and (min-width: 320px) {
    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (min-width: 320px) {
    .topnav.responsive {
        position: fixed;
        width: 361px;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a{
        float: none;
        display: block;
        margin-top: 21px;
    }
}
}
@media screen and (max-width: 360px)
@media screen and (max-width: 412px)
@media screen and (min-width: 414px)
@media screen and (min-width: 428px)
@media screen and (min-width: 768px)
@media screen and (min-width: 800px)
@media screen and (min-width: 820px)
@media screen and (min-width: 834px)
@media screen and (min-width: 884px)

320px媒体查询不起作用。 360PX媒体查询不起作用。但是其他媒体查询正在起作用。关于如何解决这个问题的任何建议？

Answer 1

如果您在问题中的顺序中以它们为单位，则很明显：最大宽度：412px Will operwrite 320和360 max宽：例如最大宽度：412px也适用于310px宽的屏幕。您需要重新安排订单以避免这种情况。

Answer 2

CSS从上到下读取 - 这意味着最后属性应用于您的选择器，只要有效，就可以优先。这意味着一个更“精确” Media-Query规则prop将不是优先于另一个，如果Media-Query放置在下方其他和他们的两个规则都是有效的。因此，您应始终使用以下方式制作媒体Query -rules

a 下降像素值，如果您使用max Width

AN 上升像素值，如果您使用最小宽度

在此示例中，min Width - Media-queries max width - <代码> Media-Queries

以这种方式，只要适用规则，第一个媒体 - Query-Query就将始终优先。当第二个Media-Query的规则应用时，这将优先考虑。尝试将此代码片段的屏幕大小拖动到整页中，您将看到此代码构造的工作原理。

div {
  width: 150px;
  height: 150px;
  background-color: red;
}

@media screen and (max-width: 412px) {
  div {
    background-color: green;
  }
}

@media screen and (max-width: 360px) {
  div {
    background-color: yellow;
  }
}

@media screen and (min-width: 320px) {
  div {
    background-color: orange;
  }
}

@media screen and (min-width: 414px) {
  div {
    background-color: black;
  }
}

@media screen and (min-width: 428px) {
  div {
    background-color: purple;
  }
}

@media screen and (min-width: 768px) {
  div {
    background-color: pink;
  }
}

@media screen and (min-width: 800px) {
  div {
    background-color: gray;
  }
}

@media screen and (min-width: 820px) {
  div {
    background-color: limegreen;
  }
}

@media screen and (min-width: 834px) {
  div {
    background-color: blue;
  }
}

@media screen and (min-width: 884px) {
  div {
    background-color: teal;
  }
}

<div></div>

Answer 3

让我们逐一浏览媒体查询，看看我们最终的位置。

这是查询（目前什么都没关系）。 （只要从360px媒体查询之前就删除了虚假的卷发右支撑）。

好的，假设我坐在一个非常狭窄的视口上 - 假设250px。

@media screen and (min-width: 320px)

是的，我通过了此测试，所以这里的任何内容都将被应用

@media screen and (max-width: 360px)

哦，我也通过了此测试，因此在这里进行的任何内容都将被应用（并从上一个媒体查询中覆盖一些东西）

@media screen and (max-width: 412px)

lo！我已经通过了此测试，所以这里设置的任何设置都将覆盖以前的设置

@media screen and (min-width: 414px)

，我失败了，所以这里什么也没有适用

@media screen and (min-width: 428px)

，

@media screen and (min-width: 768px)

我也未能通过此设置。

@media screen and (min-width: 800px)

失败

@media screen and (min-width: 820px)

失败

@media screen and (min-width: 834px)

失败

@media screen and (min-width: 884px)

失败

，因此到最后，我拥有的样式是412px宽度的任何东西。

如果我的宽度为360px或更小（除了第一个测试失败之外），则情况也是如此。

因此，对于最大测试，您将不得不将它们相反。这是一个320px或更少的视口的缩短版本：

@media screen and (max-width: 412px)

lo！我已经通过了此测试，所以这里设置的任何设置都将覆盖以前的设置

@media screen and (max-width: 360px)

哦，我也通过了此测试，所以在这里进行的任何内容都将应用（并从上一个媒体查询中覆盖一些东西）

@media screen and (min-width: 320px)

是的，我通过了此测试，所以无论如何这里将应用（并覆盖上一个类似的设置），

因此，对于320px来说，这应该是可以的360px。

现在，分钟路程正确吗？他们都不会被低于414px的视口满足，因此320px和360px不会受到影响。

假设我在宽度440px的视口上。

@media screen and (min-width: 414px)

通过了，以便将设置应用程序

@media screen and (min-width: 428px)

通过，以便应用设置填充，覆盖

@media screen and (min-width: 768px)

我已经失败的任何相同设置的设置。

@media screen and (min-width: 800px)

失败的

@media screen and (min-width: 820px)

失败

@media screen and (min-width: 834px)

失败

@media screen and (min-width: 884px)

失败

，这似乎还可以。

请记住，CSS被命名为CASCADE是有原因的，最后一个适用的设置将是“粘贴”的设置。