Inserisci query supporti CSS in Strumenti per sviluppatori di Chrome

Question

Premendo F12 posso modificare istantaneamente CSS di elementi in Chrome. Tuttavia, non posso schermo @media input e (max-width) simile a qui:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Quando premo immetterlo semplicemente scompare. Cosa posso fare per aggiungere e rimuovere dinamicamente le query multimediali?

Answer 1

Quando si modificano gli stili per un elemento specifico nella finestra di ispezione, è come se si modifica in linea attributo dell'elemento style: è possibile inserire solo le dichiarazioni di proprietà, come color: red nel tuo esempio. Questo si riflette anche nella visualizzazione DOM stessa quando modifichi gli stili di un elemento. Le query multimediali non appartengono agli stili in linea, appartengono alle regole @media che appaiono solo in un foglio di stile appropriato.

Su Chrome, è necessario modificare il foglio di stile ispettore direttamente al fine di includere le vostre domande dei media. Puoi raggiungerlo andando al pannello Sorgenti e scegliendo il foglio di stile dell'ispettore.

Dal momento che questo comporta la scrittura CSS, è necessario selezionare l'elemento. È possibile (di solito) ottenere un selettore CSS univoco per l'elemento scelto facendo clic con il pulsante destro del mouse nel pannello Elementi e scegliendo Copia percorso CSS.

Poi basta scrivere il vostro CSS:

@media screen and (max-width: 300px) { 
    /* selector for your element */ { color: red; } 
} 

Answer 2

È sempre possibile aggiungere il CSS all'interno di tag di stile nella sezione head. Basta modificare l'HTML facendo clic con il pulsante destro del mouse su html e selezionare "Modifica come HTML". Ad esempio,

<style> 
    @media screen and (min-width: 0px) and (max-width: 400px) { 
     body { 
      background-color: red; 
     } 
    } 
    @media screen and (min-width: 401px) and (max-width: 599px) { 
     body { 
      background-color: green; 
     } 
    } 
    @media screen and (min-width: 600px) { 
     body { 
      background-color: blue; 
     } 
    } 
</style> 

Answer 3

Ho avuto lo stesso problema e finalmente capito che quando stavo entrando ad esempio:

@media (max-width: 767px) 
.col-sm-3 { 
    width: 75%; 
} 

la mia dimensione dello schermo è stata in realtà più di 767px. Quindi quando ho premuto invio, è scomparso e sembrava non funzionare. Ma quello che ho capito è che quando ho regolato le dimensioni dello schermo del mio browser al di sotto di 768px, ho visto la query multimediale negli stili.