In questo post voglio condividere il modo migliore per impostare le media query nel vostro CSS.
La maggior componente di un design responsive è creare la giusta esperienza per il giusto device. Ci sono ormai centinaia di differenti device nel marcato, con differenti risoluzioni, il chè non rende la vita facile. L’opzione migliore è trovare le media queries che possono essere usate per la maggior parte degli standard e per gli apparati più popolari.
Per definizione un breakpoint è un punto, su una linea ideale che parte da 0, in cui si verifica una qualche modifica (tramite i CSS) al layout della pagina. I breakpoint si definiscono con valori numerici e unità di misura nel contesto delle media queries inserite nei nostri fogli di stili CSS.
La scelta dei breakpoint non è la migliore per implementare un buon responsive design, le media queries dovrebbero invice abbracciare un rage di risoluzioni, in altreparole da valore1 px a valore2 px.
Ecco di seguito tutte le media query che dovresti conoscere:
Phones and Handhelds
Tablets
Portatili
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* ----------- Non-Retina Screens ----------- */ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { } /* ----------- Retina Screens ----------- */ @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { } |
Orologi