为什么一个媒体查询的一半不起作用？

Question

在我尝试为大型桌面显示器创建媒体查询之前，我没有遇到任何媒体查询问题。由于某种原因，大型设备媒体查询中只有一些样式有效，而有些则无效。似乎一般样式只覆盖了一些大型媒体查询，我只是不知道为什么。

我认为它的顺序错误并且被覆盖了，但是无论我把它放在哪里（高于一般样式、低于最小查询、高于大查询），都没有任何变化。然后我看到一个建议，它需要更多的特异性，所以我尝试这样做以及!important。仍然没有任何变化。我检查了错位的; 和{ }，但都是正确的。

这些是我按顺序排列的媒体查询：

General styles not in media query
/* styles that work */
@media only screen and (min-width: 2560px){ /* styles that HALF work */ }
@media only screen and (max-width: 1275px){ /* styles that work */ }
@media only screen and (max-width: 750px) { /* styles that work */ }
@media only screen and (max-width: 600px) { /* styles that work */ }
@media only screen and (max-width: 375px) { /* styles that work */ }

更新：代码示例

PS：Idk 对所有事情都投了反对票，但不是我。

/* General styles that all work */
body {
    font-size: 1.8rem;
  }
h2{
    font-size: 4rem;
  }
h3{
   font-size: 3rem;
  }
.profilePic {
    width: 30rem;
    height: 30rem;
    text-align: center;
    border-radius: 50%;
    border: var(--primary) 5px solid;
    padding: 1%;
  }
.typingEffect h1, .typingEffect p {
    font-size: 4.5rem;
    padding: 0.5rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    text-align: center;
    overflow: hidden;
  }

/* Large device media query where some work */
@media only screen and (min-width: 2560px){

body{
      font-size: 4rem; /* Works */
    }
h2{
    font-size: 9rem; /* Works */
    }
h3{
    font-size: 5rem; /* Works */
  }
.profilePic {
    width: 100rem; /* Doesn't work */
    height: 100rem; /* Doesn't work */
  }
.typingEffect h1, .typingEffect p {
    font-size: 10.5rem; /* WORKS FOR h1, NOT FOR p */
    padding: 5rem; /* WORKS FOR h1, NOT FOR p */
  }
}

<header>
  <img class="profilePic" src= "./images/orange-Avatar3.svg" alt="Avatar of me"/>
  <div class="typingEffect">
     <h1 class="name"> Hey, I'm Me</h1>
     <p class="tagline"><span className="typed-text"></span><span class="cursor">&nbsp;</span></p>
  </div>
</header>

Answer 1

好的，伙计，我强烈建议您访问Mobile-first design.，以避免使用max-width。由于顺序很重要，您可能会最终否决您编写的某些属性。看看这个例子。

div>header>h1 {
  font-size: 40px;
  color: orange;
}

@media only screen and (min-width: 2560px) {
  div>header>h1 {
    font-size: 150px;
    color: blueviolet;
  }
}

@media only screen and (max-width: 1275px) {
  div>header>h1 {
    font-size: 100px;
    color: brown;
  }
}

@media only screen and (max-width: 750px) {
  div>header>h1 {
    font-size: 75px;
    color: yellowgreen;
  }
}

@media only screen and (max-width: 600px) {
  div>header>h1 {
    font-size: 50px;
    color: coral;
  }
}

@media only screen and (max-width: 375px) {
  div>header>h1 {
    font-size: 125px;
    color: red;
  }
}

<div class="container">
  <header class="">
    <h1 class=""> Using Animation! </h1>
  </header>
</div>

如您所见，每个查询都在工作。但是如果你换掉订单问题就会开始出现，因此你在使用max-width 时要小心，以免弄乱你的代码。

看看这个我搞砸了顺序的sn-p。

div>header>h1 {
  font-size: 40px;
  color: orange;
}

@media only screen and (min-width: 2560px) {
  div>header>h1 {
    font-size: 150px;
    color: blueviolet;
  }
}

@media only screen and (max-width: 600px) {
  div>header>h1 {
    font-size: 50px;
    color: coral;
  }
}

@media only screen and (max-width: 375px) {
  div>header>h1 {
    font-size: 125px;
    color: tomato;
  }
}

@media only screen and (max-width: 1275px) {
  div>header>h1 {
    font-size: 100px;
    color: brown;
  }
}

@media only screen and (max-width: 750px) {
  div>header>h1 {
    font-size: 75px;
    color: yellowgreen;
  }
}

<div class="container">
  <header class="">
    <h1 class=""> Using Animation! </h1>
  </header>
</div>

在上面的 sn-p 中，下面的查询甚至没有工作

@media only screen and (max-width: 600px) {
    div>header>h1 {
        font-size: 50px;
        color: coral;
    }
}

@media only screen and (max-width: 375px) {
    div>header>h1 {
        font-size: 125px;
        color: tomato;
    }
} 

！！由于底部的代码在 CSS 中更强大，因此您会发现 750px 断点正在工作，因为它位于底部。

@media only screen and (max-width: 750px)

它推翻了breakpoints 600px and 375px，因为它们出现在 CSS 文件底部的 750px 断点之前。

    @media only screen and (max-width: 600px)
    @media only screen and (max-width: 375px)

**

我确定您的问题只是 CSS 特异性问题

**

这就是为什么最好的方法是使用mobile-first and use min-width，因为它更容易保养和维护。我希望我的回答能让您清楚地了解您的问题以及为什么您的媒体无法正常工作。

Answer 2

使用最大宽度而不是最小宽度来保持一致性

@media only screen and (max-width: 2560px){ /* styles that HALF work */ }
@media only screen and (max-width: 1275px){ /* styles that work */ }
@media only screen and (max-width: 750px) { /* styles that work */ }
@media only screen and (max-width: 600px) { /* styles that work */ }
@media only screen and (max-width: 375px) { /* styles that work */ }

Answer 3

使用最小宽度代替最大宽度 当以这种方式使用 max-width 时，css 媒体查询无法理解您的查询

当你的页面是 600px 时，它几乎兼容所有的媒体查询

最佳途径：

/* styles that work */
@media only screen and (min-width: 1275px){ /* styles that HALF work */ } 
@media only screen and (min-width: 751px){ /* styles that work */ }
@media only screen and (min-width: 601px) { /* styles that work */ }
@media only screen and (min-width: 376px) { /* styles that work */ }
@media only screen and (max-width: 375px) { /* styles that work */ }