@import Styles funktioniert nicht in einer Medienabfrage

Question

Ich versuche, einen Stil basierend auf einer Medienabfrage zu importieren, aber der Import wird nicht ausgelöst Wenn ich Stile direkt in der Medienabfrage einfügen, werden sie auf der Seite gerendert. Hier

ist ein Link zu der Live-Site http://update.techbasics.ca

Hier ist mein style.css mit den Medien-Anfragen und den Importen

Ich bin mit Wordpress, wenn das Debug hilft.

@import url('base.css'); 
/****************************************************************** 
Site Name: Tech Basics 
Author: Anders Kitson 

Stylesheet: Main Stylesheet 

Here's where the magic happens. Here, you'll see we are calling in 
the separate media queries. The base mobile goes outside any query 
and is called at the beginning, after that we call the rest 
of the styles inside media queries. 
******************************************************************/ 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; } 

/***************************************************************** 
BASE CSS 
*****************************************************************/ 

/***************************************************************** 
MEDIA QUERIES 
*****************************************************************/ 
@media only screen and (min-width: 480px) { 
    @import url('min480.css'); 
    } 
@media only screen and (min-width: 600px) { 
    @import url('min600.css'); 
    } 
@media only screen and (min-width: 768px) { 
    body { 
    background: purple; } } 
@media only screen and (min-width: 992px) { 
    body { 
    background: orange; } } 
@media only screen and (min-width: 1382px) { 
    body { 
    background: url("../img/noisy_grid.png"); } } 
/* iPhone 4 ----------- */ 
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { 
    @import url('base.css'); 
} 

und hier ist min600.css (befindet sich im selben Verzeichnis wie die Datei style.css)

header { 
    text-align: left; } 
    body{ 
    background: green; 
    } 

Answer 1

Es funktioniert gut, versuchen Sie Ihre Fenster, um die Größe und Sie werden die Farben zu ändern sehen wie ich in meinem Hauptfenster auf meinem Bildschirm (1920x1080) der CSS-Regel

body { 
background: url("../img/noisy_grid.png"); 
} 

liegt in style.css, Zeile 37-38 Feuer zuerst sehen kann, ist, warum Sie nicht die orange Farbe sehen. Versuchen Sie, Ihre CSS-Regeln zu arrangieren

Answer 2

Ich hatte das gleiche Problem und nach der Suche, ohne eine gute Lösung zu finden, habe ich am Ende die Media-Abfragen auf die importierten CSS verschoben. Und tatsächlich werden alle Stylesheets heruntergeladen, auch wenn sie nicht angewendet werden (siehe CSS media queries).

Dann, was ist der Zweck von separaten Dateien? Für mich hält es die Dinge organisiert. Mit Ihrem Beispiel:

@import url(min480.css); /* min-width: 480px */ 
@import url(min600.css); /* min-width: 600px */ 

Dann auf der min600.css:

/* min600.css */ 
@media only screen and (min-width: 600px) { 
    header { 
     text-align: left; 
    } 
    body { 
     background: green; 
    } 
} 

Answer 3

Haben Sie wie folgt verwenden?

können Sie schreiben:

@import url('path.css') (screen and min/max-width: 600px);

Sie Pfad hinzufügen können, wie Sie @import

oder wie verwenden:

@import url(style.css) (screen and min-width:600px);

Answer 4

versuchen, diese Art von Code

Hier

Answer 5

ist die Lösung:

/* Everything 700px and lower */ 
@import url("./700.css") only screen and (max-width: 700px); 

Answer 6

MDN besagt, dass @import nicht verschachtelt werden können und müssen kommen vor alle anderen Erklärungen außer @charset.

Die Syntax ist wie folgt:

@import url; 
@import url list-of-media-queries; 

https://developer.mozilla.org/en-US/docs/Web/CSS/@import