html - 为什么我的 CSS 媒体查询会被手机忽略？

Question

我的 CSS 中有 3 个媒体查询，当我调整浏览器大小时它们似乎工作正常，但当我使用检查器中的响应式设计工具(“切换设备模式”)和手机时却没有。

这是我的 CSS 的一部分:

@media screen and (max-width: 1500px) {


  body {
    width: 100%;
  }
}

@media screen and (max-width: 1200px) {


  body {
    width: 100%;
  }

  #slider_container {
    float: none;
    padding-top: 2em;
    width: 75%;
    display: block;
    overflow: hidden;
    padding-left: 0px;
    margin-left: auto;
    margin-right: auto;
  }

  #slide_desc {
    //

    width: 30%;
    display: block;
    float: none;
    margin-top: 0;
    margin-left: auto !important;
    margin-right: auto;
    overflow: hidden;
    font-size: 1.3em;
    color: #353535;
/* line-height: 2em; */
    text-align: justify;
    font-family: georgia;
    width: 80%;
  }
}

@media screen and (max-width: 768px) {

  #slider_container {
    width: 100%;
    margin: 0px;
    padding: 0px;
    padding-top: 1em;
  }

  #menu_button {
    display: block;
    width: 2em;
    float: right;
    margin-top: 0.5em;
    margin-right: 2em;
    cursor: pointer;
  }

  #top_menu {
    overflow: hidden !important;
    height: 3em;
    /* background-color: gray; */
  }

  #top_menu>ul {
    margin-top: 3em;
    width: 100%;
    height: 0;
    position: absolute;
    z-index: 100;
    overflow: hidden;
  }

  #top_menu>ul>li {
    margin: 0;
    /* background-color:red !important; */
    width: 100% !important;
    display: block !important;
  }

  #top_menu>ul>li>a {
    text-align: left;
    width: 100%;
    margin-left: 0;
    padding-left: 1em;
    height: auto;
  }

  #slides_container {
    display: none;
  }
}

前 2 个媒体查询总是工作正常，但第 3 个被忽略。第三个媒体查询仅在浏览器本身的大小调整到 768px 以下时才有效。

我知道还有其他类似的问题，但大多与 !important 的使用或查询的错位有关。我的查询位于文件末尾，奇怪的是，如果调整浏览器大小，它们仍然有效。

知道为什么会发生这种情况吗？

Answer 1

您需要将视口(viewport)元标记设置为 content="width=device-width, initial-scale=1"。这告诉浏览器以设备屏幕的宽度呈现页面的宽度。因此，如果该屏幕是 320 像素宽，则浏览器窗口将是 320 像素宽，而不是缩小并显示 960 像素(或设备默认显示的任何内容)。

HTML

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

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

您可以阅读有关视口(viewport)元标记及其工作原理的更多信息 here .