Innhold
Ingen har noen gang sagt at responsivt webdesign var enkelt, men det er mye du kan gjøre for å glatte ut prosessen. Hvis du kan gå inn i et responsivt prosjekt uten å måtte bekymre deg for størrelsen på nettene dine, vil det spare deg for minst én hodepine underveis.
Her er en rask oversikt over standardmålingene du kan bruke på tvers av enheter, avhengig av bredden du velger å lage kolonnene. Husk at kolonnebreddene skal være de samme på tvers av enhetsstørrelser, men du kan justere den opprinnelige bredden for å dekke dine behov. Jeg designer vanligvis et mobilnettsted med 360 pixel bredde for å fungere i dette systemet.
120px brede kolonner
Fjernsyn
1024 x 576 (1080p sideforhold): 8 kolonner, 32 piks margin
Desktop
1.440 x 840: 12 kolonner, 0px margin
1280 x 800: 10 kolonner, 40 px marg til venstre og høyre
Tablett
1024 x 768: 8 kolonner, 32 px marg til venstre og høyre
960 x -: 8 kolonner, 0 px marg
Mobil
320 x -: 3 kolonner, 0 px marg
100 piks brede kolonner
Fjernsyn
1024 x 576 (1080p-forhold): 10 kolonner, 12 px marg til venstre og høyre
Desktop
1440 x 840: 14 kolonner, 20 px marg til venstre og høyre
1280 x 800: 12 kolonner, 40 px marg til venstre og høyre
Tablett
1024 x 768: 10 kolonner, 12 px marg til venstre og høyre
960 x -: 9 kolonner, 30 px marg til venstre og høyre
Mobil
320 x -: 3 kolonner, 10 px marg til venstre og høyre
80px brede kolonner
Fjernsyn
1024 x 576 (1080p-forhold): 12 kolonner, 32 px marg til venstre og høyre
Desktop
1440 x 840: 18 kolonner, 0 px marg
1.280 x 800: 16 kolonner, 0 px marg
Tablett
1024 x 768: 12 kolonner, 32 px marg til venstre og høyre
960 x -: 12 kolonner, 0 px marg
Mobil
320 x -: 4 kolonner, 0 px marg
Denne artikkelen dukket opprinnelig opp i nettmagasinet utgave 281; kjøp den her!
