design reattivo per siti Web che utilizzano css-css

Sto scrivendo css per alcuni siti web che devono essere reattivi. Sono nuovo di CSS e non so molto delle tecniche di risposta. Ho diviso il mio codice css in tre parti.

1. Desktop: tutti gli stili universali
2. Tablets: @media (min-width: 768px) e (max-width: 991px) {i miei stili}
3. Mobiles: @media (min-width: 320px) e (max-width: 480px) {i miei stili}

Sarà pienamente reattivo e supportato Tutti dispositivi standard o devo fare qualche cambiamento in più? Qui TUTTI significa letteralmente tutti i dispositivi.

risposte:

Non devi lasciare spazi tra 481 e 766 e tra 0 e 319 px. Questo non è veramente reattivo.

@media screen and (max-device-width:480px){ // styles for mobile}
@media screen and (max-device-width:780px){ // styles for tablets}
@media screen and (min-device-width:781px){ // styles for desktop}

MODIFICARE Ci sono indossabili inferiori a 319 px. Esempio:

/* ----------- Moto 360 Watch ----------- */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {

}

Dovrebbero esserci alcuni dispositivi tra 481 e 766.

Se pensi che la risposta sia semplice, mi sento male per te figlio, abbiamo 99 finestre, ma l'iPhone è solo una.

Ecco la lista di Media query per dispositivi standard

Quello che quasi tutti hanno sbagliato è che rispondeil design dovrebbe essere fatto sulla base di alcuni breakpoint predefiniti. Dovrebbe definire il tuo contenuto, non lo schermo del tuo visitatore.Se ci sono 10 punti di interruzione, c'è qualcosa di decisamente sbagliato nella struttura del sito Meno query media = migliore Inizia da lì e concludi la struttura perfetta per il tuo contenuto per QUALSIASI schermo.