CSS @mediaクエリがメタタグで機能しない

Question

@mediaクエリを使用してコンテンツのレイアウトを変更する際に問題が発生しています。

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

私はすべて」、「画面」の代わりに電流を使用するようにクエリを変更しようとしている：私はhead、

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

そして、私のクエリのいずれかでmetaは次のようになり、次のしています"しかし、それは影響を与えません。 @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

あなたは再びこれを試すことができます。

ヘッド

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

CSS

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

}

Answer 2

を見つける下記

あなたは明らかに間違っ何かを理解していました。ここで

はフィドルです： https://jsfiddle.net/dc327qq1/

（注）この行：

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

Iは、max-幅分から、それを変更しました。 また、なぜこれらの「 `」がありますか？