为什么我的 768px 和 576px 媒体查询不起作用-解网

问：

我正在尝试媒体查询，但它们不适用于 768px 和 576px。我尝试了最小宽度，但它也不起作用。

.changing-color {
  background-color: powderblue;
  width: 100vw;
  height: 30vh;
  font-size: 3vw;
}

@media screen and (max-width: 1400px) {
  .changing-color {
    background-color: chartreuse;
  }
}

@media screen and (max-width: 1200px) {
  .changing-color {
    background-color: blueviolet;
  }
}

@media screen and (max-width: 992px) {
  .changing-color {
    background-color: brown;
  }
}

@media screen and (max-width: 768px) {
  .changing-color {
    background-color: darkorange;
  }
}

@media screen and (max-width: 576px) {
  .changing-color {
    background-color: darkkhaki;
  }
}

<div class="changing-color"></div>

CSS 互联网浏览器

.changing-color {
    background-color:powderblue;
    width: 100vw;
    height: 30vh;
    font-size: 3vw;
  }

  @media screen and (max-width: 1400px){
    .changing-color {
      background-color:chartreuse;
    }
  }

  @media screen and (max-width: 1200px){
    .changing-color {
      background-color:blueviolet;
    }
  }

  @media screen and (max-width: 992px){
    .changing-color {
      background-color:brown;
    }
  }

  @media screen and (max-width: 768px){
    .changing-color {
      background-color:darkorange;
    }
  } 

   @media screen and (max-width: 576px){
    .changing-color {
      background-color:darkkhaki;
    }
  }

<div class="thing changing-color"></div>

0赞 Rohit Gupta 9/2/2022 #2

您是否添加了这样的视口元标记？

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

这是必需的，因为默认情况下，大多数移动浏览器都在谎报其视口宽度。

参考媒体查询初学者指南

上一个：<input type=“button”> 不继承 font-family [duplicate]

下一个：从 Internet Explorer 切换到 Edge 时的样式问题

为什么我的 768px 和 576px 媒体查询不起作用

Why my media query for 768px and 576px not working

评论