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

Question

我的 CSS 中有 3 个媒体查询，当我调整浏览器大小时它们似乎工作正常，但当我使用检查器 ("toggle device mode") 的响应式设计工具时却没有在手机上。

这是我的一部分 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

因为你有语法错误：

  #slide_desc {
    //

双斜杠在 CSS 中无效。

Answer 2

您需要将视口元标记设置为 content="width=device-width, initial-scale=1"。这告诉浏览器以设备屏幕的宽度呈现页面的宽度。因此，如果该屏幕为 320 像素宽，则浏览器 window 将为 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.

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

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

Why is my CSS media query ignored by mobile phones?

html

css

media-queries

responsive-design