媒体查询的奇怪行为

Question

我花了几个小时试图找出问题所在.. 我不知道媒体查询有什么问题。
css 文件如何包含在 index.html

中

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Custom styles CSS -->
  <link href="css/main.css" rel="stylesheet" media="screen">
  <!-- Responsive CSS -->
  <link href="css/responsive.css" rel="stylesheet">

我的 main.css 文件的一部分

#home {
    font-size : 1.5rem;
    background: url(../images/home2.jpg) no-repeat center center;
    -webkit-background-attachment: fixed;
    background-attachment: fixed;
    background-color: @backgroundHomeColor;
    background-size: cover;
    padding: 0;
    position: relative;
    white-space: normal;
}
/* === MAIN === */
.section-padding {
    padding: 6rem 0;
}

responsive.css 文件

@media only screen and (max-width:1920px) {
    .personal-info{
        padding-right:180px;
    }
}


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

}


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

}

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

    .portfolio-item{
        min-height: 150px;
    }
    .download-button a{
        margin-right: 10px;
    }

}

@media only screen and (max-width : 992px) {
    .navbar-custom .navbar-brand{
        padding: 10px 15px;
    }

    .navbar-custom .navbar-nav > li > a, 
    .navbar-custom .navbar-nav .dropdown-menu > li > a{
        font-size: 12px;
        padding: 15px;
    }

    /*about me section*/
    .biography {
        margin-top: 20px;
        margin-bottom: 45px;
    }

    /*resume*/
    .resume:before,
    .resume:after{
        left:0px;
    }
}

@media only screen and (max-width : 768px) {
    // Home intro section
    #home {
        font-size : 1.4rem;
    }
    .md-full-height {
        height: 560px !important;
    }
    // General styles
    .section-padding {
        padding: 222rem 0;
    }

    .social-icons ul{
        margin-left: 0;
    }

    .social-icons li{
        padding:0;
    }

}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    #home {
        font-size : 1.2rem;
    }
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
    #home {
        font-size : 1.0rem;
    }
}

问题最大的是@media only screen and (max-width : 768px) {

有时能用，有时不能用，我不知道哪里出了问题。

考虑这个 class

#home {

它适用于媒体 320px,480px, 992px ....，但即使 !important 也不会为 768px 媒体查询应用样式。

我注意到一件有趣的事，如果样式没有在 main.css
中声明喜欢这个

.social-icons ul{
    margin-left: 0;
}

从此 768px 查询中应用，但如果在 main.css 中声明了样式，则它不会应用，而只会从 768px 查询中应用。

但是如果我将所有这些 media queries 样式移动到 main.css 的底部，一切都会完美无缺。

我不知道该怎么做。我花了很多时间试图找到这个 768px 媒体查询的解决方案。

Answer 1

您在 768px 媒体查询中使用双斜杠 // 评论。这在 CSS 中无效，注释必须这样写：/* comment */

您收到 CSS 语法错误，代码块未执行。

媒体查询的奇怪行为

Weird behavior of Media Queries

html

javascript

css

media-queries

responsive-design