Le query multimediali CSS sono minime e min-device in conflitto?

Question

Sono molto nuovo nel mondo delle query sui media, ed è chiaro che c'è qualcosa di fondamentale che mi manca sulla differenza tra larghezza e larghezza del dispositivo, oltre alle loro ovvie capacità di targeting.

Mi piacerebbe indirizzare sia i computer normali che i dispositivi con gli stessi punti di interruzione, quindi ho duplicato tutte le mie min. Min. & query per le query min-device e max-device. Per qualche ragione, quando aggiungo le controparti -dispositivo, il mio CSS è interpretato in modo molto diverso dai normali computer, e non sono sicuro di cosa sto facendo male.

You can see the effects here (questo è quello che dovrebbe essere simile)

And here (dopo l'aggiunta -Dispositivo larghezza alle mie domande, il mio CSS si fa sfondare fino alla larghezza minima - le risoluzioni più grandi sono visti anche quando il browser la larghezza è inferiore a quella che viene chiamata).

Ecco i link CSS: c'è qualcosa di sbagliato nella mia sintassi? :

<link rel="stylesheet" media="only screen and (max-width: 674px), only screen and (max-device-width: 674px)" href="300.css"> 
<link rel="stylesheet" media="only screen and (min-width: 675px) and (max-width: 914px), only screen and (min-device-width: 675px) and (max-device-width: 914px)" href="650.css"> 
<link rel="stylesheet" media="only screen and (min-width: 915px) and (max-width: 1019px), only screen and (min-device-width: 915px) and (max-device-width: 1019px)" href="915.css"> 


<link rel="stylesheet" media="only screen and (min-width: 1020px), only screen and (min-device-width: 1020px)" href="1020.css"> 
<link rel="stylesheet" media="only screen and (min-width: 1200px) and (max-width: 1299px), only screen and (min-device-width: 1200px) and (max-device-width: 1299px)" href="1200.css"> 
<link rel="stylesheet" media="only screen and (min-width: 1300px), only screen and (min-device-width: 1300px)" href="1300.css"> 

Answer 1

dispositivo larghezza si riferisce alla risoluzione del display, mentre la larghezza si riferisce alla larghezza del browser stesso (che sarà differente dalla risoluzione se il browser non è ingrandita (ad esempio 1024 da 1024x768.)). Se la tua risoluzione è abbastanza grande da portarti in un punto di interruzione, ma la larghezza del browser è abbastanza piccola da farti entrare in un altro, ti ritroverai con una strana combinazione di entrambi.

Se non avete una ragione legittima per limitare i fogli di stile in base alla risoluzione e non la dimensione della finestra, poi basta usare min-width/max-width ed evitare min-device-width/max-device-width.