Seltsames Verhalten von Media Queries

Question

Ich habe mehrere Stunden damit verbracht, herauszufinden, was das Problem ist. Ich habe keine Ahnung, was mit Medienabfragen falsch ist.
Wie CSS-Dateien in index.html

enthalten sind

<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"> 

Der Teil meines main.css Datei

#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; 
} 

Die responsive.css Datei

@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; 
    } 
} 

Die problematischsten ist @media only screen and (max-width : 768px) {

Es funktioniert manchmal, manchmal nicht, ich habe keine Ahnung, was falsch ist.

Betrachten Sie diese Klasse

#home { 

Es arbeitet mit Medien 320px,480px, 992px .... aber sie gilt nicht Stil für 768px Medienabfrage auch bei !important.

Eine interessante Sache, die ich bemerkt habe, dass, wenn Stile in main.css
wie diese

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

nicht deklariert wird aus dieser 768px Abfrage angewendet, aber wenn Stil in main.css deklariert wird es nicht angewendet wird, aber nur von 768px abfragen.

Aber wenn ich alle diese media queries Stile auf den Boden der main.css verschiebe funktioniert alles perfekt.

Ich habe keine Ahnung, was zu tun ist .. Ich habe viele Stunden damit verbracht, die Lösung für diese 768px Medienabfrage zu finden.

Answer 1

Sie verwenden doppelten Schrägstrich // für Kommentare in 768px Medienabfrage. Dies ist in CSS nicht gültig, wenn die Kommentare wie folgt geschrieben werden müssen: /* comment */

Sie erhalten einen CSS-Syntaxfehler und der Codeblock wird nicht ausgeführt.