Question

我在使用@media查询更改内容布局时遇到了一些问题。我在meta，

中有以下head

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

我的一个查询看起来像这样：

@media all and (min-width: 768px) {
  .navbar-default .navbar-nav > li > a {
    background-color: #f06449;
    color: #fff;
  }
  .centerIcon .fa-arrow-down {
    display: none;
  }
}

我尝试将查询更改为使用“screen”而不是当前的“all”，但它没有任何影响。从@media开始的代码的实际颜色是白色的（这取决于您拥有的文本编辑器），但我怀疑代码被其他东西覆盖，这可能是准确的吗？

非常感谢提前！

下面你会找到我的CSS

/*GENERAL*/
body {
padding-bottom: 70px;
font-family: "Raleway", "sans-Serif";
background-color: #f3f3f3;

}
/*BACKGROUND IMAGE*/
.introduction {
    height:100vh;
    width: 100%;
    background-image: url("../recourses/images/background3.jpeg"); no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
}

    /*JUMBOTRON*/
    .jumbotron {
        background-color: transparent;
        background: transparent;
        border-color: transparent;
        color: white;
    }

    .jumbotron .img-responsive {
        height: 250px;
        width: 400px;
        border-radius: 25px;
    }

    .jumbotron .transparentHr {
        background-color: transparent;
        border-color: transparent;
    }

    .jumbotron .fadeIn {
        display: block;
        text-align: center;
        visibility: hidden;
    }

    .jumbotron .fadeIn > a > i {
        /*color:    #f06449;*/
        margin-right: 10px;
        padding: 10px 10px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 3px;
    }

    .jumbotron .fadeIn > a > i:hover {
        background-color: rgba(255, 255, 255, 0.7);
    }

    .centerIcon .fa-arrow-down {
        color: #fff;
        display: block;
        text-align: center;
        margin-top: 250px;
    }

    .jumbotron .pulse > a {
        text-decoration: none;
    }


/*NAVBAR*/
.navbar {
font-family: 'Lato', sans-serif;
font-weight: 700;
background-color: transparent;
background: transparent;
border-color: transparent;
}

.navbar-default .navbar-nav > li > a {
color: #f06449;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #f06449;
color: #fff;
    -webkit-transition: background-color 300ms linear;
    -moz-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

.navbar-left {
font-weight: 900;
font-size: xx-large;
color: #f06449;
text-decoration: none;
}

.navbar-left:hover {
text-decoration: none;
color: #f06449;
}

/*GENERAL CONTENT*/
.boldTitle {
font-weight: 800; 
color: white;
}

.transparentHr {
background-color: transparent;
border-color: transparent;
}

/*PORTFOLIO PAGE*/
#colorChangeH2 {
font-weight: 800; 
color: #f06449;
}
/*PANEL BODY*/
.panel-primary{
    box-shadow: 0px 35px 20px -20px rgba(0,0,0,0.5);
    border-radius: 3px;
    border: none;
}

.panel-primary .panel-heading {
    background-color: rgba(215, 215, 215, 0.7);
    border-bottom: none;
}

.panel-primary .panel-heading h3 {
    color: rgba(73, 90, 117, 1);
}

    /*BUTTON - Read More...*/
    .btn {
        display: block;
        background-color: #fff;
        color: #f06449;
        text-align: center;
        border-radius: 3px;
        box-shadow: 0px 17px 7px -7px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: all ease-in-out 200ms; 
    }

    .btn:hover {
        box-shadow: 0px 25px 10px -10px rgba(0, 0, 0, 0.1);
        transform: translate(0px, -2px);
        background-color: #f06449;
        color: #fff;
    }

    .panel-body > p > a {
        text-decoration: none; 
    }

    .panel-body > p > a:focus {
        outline: 0;
    }

    .modal-footer .btn {
        border: none;
    }

/*CONTACT*/
.col-xs-9 > h3 {
font-weight: 800; 
color: #f06449;
}

.boldH3 > h3 {
font-weight: bold;
}

/*Social Icons*/
.contactSocialIcons > h3 {
    display: block;
    text-align: center;
}

.contactSocialIcons {
    display: block;
    text-align: center;
}

/*Contact Form*/

.footer {
background: gray; 
}

/*MODAL*/
.modal .fade {
    box-shadow: 0px 35px 20px -20px rgba(0,0,0,0.5);
    border-radius: 3px;
    border: none;
}

.modal-header {
    background-color: rgba(215, 215, 215, 0.7);
    color: rgba(73, 90, 117, 1);
    font-weight: 800;
}

.modal-header > h3 {
    font-weight: 800;
}

.modal-header .close {
    color: #f06449;

/*.modal-footer .btn {
    background-color: #f06449;
    color: #fff;
}*/
/*
    .modal-footer .btn:hover {
        background-color: #fff;
        color: #f06449;
    }*/

/*MEDIA QUERIES*/
/* Small devices (tablets, 768px and up) */
@media all and (max-width: 768px) {

    .navbar-default .navbar-nav > li > a {
        background-color: #f06449;
        color: #fff;
    }

    .centerIcon .fa-arrow-down {
        display: none;
    }
}

Answer 1

你显然明白了一些错误。

这是一个小提琴： https://jsfiddle.net/dc327qq1/

请注意以下这一行：

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

我将它从min更改为max-width。还有为什么你有这些“？”？

Answer 2

你可以再试一次：

<强>头

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

<强> CSS

@media only screen and (min-width: 768px) {
// something you want

}

CSS @media查询不适用于元标记

2 个答案: