Diversi file CSS per diverse query multimediali

Question

C'è un modo per avere un file HTML utilizzare un foglio di stile diverso in base alle proprietà del supporto? So che il metodo link accetta un tipo di supporto, ma tutti i riferimenti che trovo indicano solo il tipo di supporto, non una query estesa. Sono anche incerto su come garantire che ne venga selezionato solo uno e quale.

Fondamentalmente nel mio file CSS corrente Ho una sezione media come questo (semplificato solo per riferimento):

@media (min-device-pixel-ratio: 1.5) { 
    specific-media-rules 
} 

Quello che mi piace è che invece di avere questa sezione e una sezione molto simile per altri i media servono per due file distinti.

Answer 1

Sì. Un esempio potrebbe essere la seguente: si desidera utilizzare un file CSS diverso a seconda della larghezza dello schermo (uno per i telefoni, uno per le piccole tavolette) e si potrebbe fare così come tale:

<link rel="stylesheet" media='screen and (min-width: 140px) and (max-width: 380px)' href="phone.css"/> 
<link rel="stylesheet" media='screen and (min-width: 381px) and (max-width: 700px)' href="tablet.css"/> 

Nota tuttavia, che è necessario assicurarsi che i requisiti per ogni foglio di stile non siano mai gli stessi, come se fossero (diciamo se entrambi i fogli di stile sopra avevano la stessa larghezza min e larghezza massima) entrambi sarebbero applicati.