Question

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

  <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) {

它有时会起作用，有时候不行，我不知道出了什么问题。

考虑这个课程

#home {

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

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

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

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

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

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

Answer 1

您在768px媒体查询中使用双斜杠//进行评论。这在CSS中无效，其中注释必须如下所示：/* comment */

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

媒体查询的奇怪行为

1 个答案: