Gli stili di importazione non funzionano in una query multimediale

Question

Sto tentando di importare uno stile basato su una query multimediale ma l'importazione non viene attivata Se inserisco gli stili direttamente nella query multimediale, vengono sottoposti a rendering nella pagina.

Questo è il link al sito live http://update.techbasics.ca

Ecco la mia style.css con le media query e le importazioni

sto usando wordpress se questo aiuta il debug.

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

e qui è min600.css (che si trova nella stessa directory del file style.css)

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

Answer 1

Funziona bene, tenta di ridimensionare la finestra e vedrete i colori che cambiano come posso vedere nella mia finestra principale sul mio schermo (1920x1080) la regola CSS

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

Situato nel style.css, la linea 37-38 incendi prima, è per questo che non si può vedere il colore arancione. Provi ad organizzare le tue regole css

Answer 2

Ho avuto lo stesso problema e dopo aver cercato senza trovare una buona soluzione, ho finito per spostare le query multimediali sul css importato. E infatti tutti i fogli di stile vengono scaricati anche se non vengono applicati comunque (vedi CSS media queries).

Allora qual è il punto di avere file separati? Per me, mantiene le cose organizzate. Usando il tuo esempio:

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

Poi sul min600.css:

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

Answer 3

hai usato in questo modo?

Si può scrivere:

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

È possibile aggiungere il percorso, come si usa @import

o simile:

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

Answer 4

provare quel tipo di codice

@import url("/inc/Styles/full.css") (min-width: 940px); 

Answer 5

ecco la soluzione:

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

Answer 6

MDN afferma che @import non possono essere nidificate e deve venire prima tutte le altre dichiarazioni, tranne @charset.

La sintassi è la seguente:

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

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