Questo è un elenco dei breakpoint che ho utilizzato, per modificare regole css diverse. Ci sono dimensioni molto vicine, ma sono spesso stato costretto a farlo per rendere il più fluido possibile la responsibilità di alcuni elementi di layout.
Il design delle pagine che mi è stato dato, aveva infatti molti layout diversi (contenitore testo di larghezza e posizione differente, con margini differenti, spaziatura lettere e interlinea differenti e via dicendo...), e quindi gli stessi breakpoint non si adattavano a tutte le pagine, creando degli spicevoli effetti visivi, come elementi male allineati, margini sbagliati e via dicendo. Per cui alla fine ho preferito utilizzare tutti i mediaquery necessari, senza lesinare troppo.
Non so quale sia la risoluzione più piccola da dover garantire, quindi ho arbitrariamente scelto di arrivare fino ai 500px.
codice:/* Header*/ @media (max-width: 1048px) /* MENU*/ @media (max-width: 1048px) @media (max-width: 500px) /*PAGES*/ @media (max-width: 1088px) @media (max-width: 992px) @media (max-width: 950px) @media (max-width: 940px) @media (max-width: 880px) @media (max-width: 768px) @media (max-width: 750px) @media (max-width: 640px) @media (max-width: 500px)

Rispondi quotando
