Come capire i valori min-width e max-width corretti per i CSS reattivi? - css, responsive-design, media-query, punti di interruzione

Sto solo ora immergendomi in reattivi CSS edesign, e mi chiedo come dovrei calcolare le varie larghezze del dispositivo. Non voglio passare tutto il giorno a testare ogni singolo dispositivo mobile possibile, voglio solo avere il layout reattivo abbastanza da dove funziona.

Ho visto alcuni siti usando @media only screen and (max-device-width: xx) ma sembra che lo limiti a risoluzioni molto specifiche, non a dimensioni effettive della finestra del browser.

Qualsiasi consiglio sarebbe fantastico. Non sono nuovo allo sviluppo web o CSS, ma totalmente nuovo al design reattivo.

risposte:

Sembrerebbe che tu stia cercando di capire dove e quando applicare il tuo punti di interruzione.

Piuttosto che testare la risoluzione su una serie di dispositivi, perché non creare un design reattivo che sia accettabile in ogni risoluzione? Non esistono punti di interruzione magici che risolvono i siti Web reattivi per ogni dispositivo, poiché ogni sito Web reattivo differirà a seconda del layout, del contenuto, ecc. E ci sono tonnellate di dispositivi diversi con risoluzioni diverse.

Potresti pensare, "che diavolo, non ho intenzione di andare pixel per pixel e controllare il mio sito web,"ma non è proprio quello che intendo.

1. Salta in un browser, vai al tuo sito web e apri la console
2. Ridimensiona il viewport a una risoluzione molto bassa. 320 px è un buon punto di partenza.
   (Nota: Per ottenere la dimensione del tipo di finestra view.innerWidth nella console. Vedere risorse per ulteriori modi per migliorare il debug del tuo progetto)
3. Analizza il tuo layout. Come guarda questa risoluzione? Se è necessario modificare il layout con questa risoluzione, è ora di aggiungere un punto di interruzione!
4. Allunga lentamente la finestra del browser fino a quando qualcosa non si rompe o sembra orribile. A questo punto dovrai inserire un altro punto di interruzione.
5. Ripeti il ​​passaggio 4 a tuo piacimento

Tieni a mente:

Il punto di progettazione reattivo non è quello di rendere il tuo sito un bell'aspetto su tutti i dispositivi, è per rendere il tuo contenuto un bell'aspetto dovunque - Sam Richards

risorse:

• Responsive Web Design - Programmazione con Anthony
• Tipografia reattiva
• Breakpoint logici per il tuo design reattivo
• Come menzionato nel video sopra, Modernizr è una fantastica libreria JS che aiuta a rilevare funzionalità specifiche del dispositivo
• Caratteristica Responsive Design View in Firefox 15+
• Tutorial Design reattivo Visualizza per Chrome