HC 1.2 Responsiv design
Table of contents
Responsiv design handlar om att anpassa layouten på bästa sätt efter befintligt utrymme; det vill säga vilken typ av enhet och vilken skärmstorlek den enheten har.
Hur fungerar det?
Vi lägger in följande <meta>-tagg i <head>, som sätter viewporten till bredden på enheten i vilken sidan tittas på.
<meta name="viewport" content="width=device-width, initial-scale=1">
Adaptiv design och responsiv design
Responsiv design svara direkt på alla förändringar i viewporten. Drar du fönstret så det blir större eller mindre, kommer element på sidan att justeras samtidigt.
Adaptiv design svarar på vissa punkter i viewportens bredd, till exempel om fönstret är mindre än 500px så ändras designen så att vissa element hamnar i kolumn istället för i rad.
Det vanligaste är att kombinera de båda.
Media queries
För att ändra designen vid vissa viewport bredder (breakpoints) eller enheter kan vi andvända media queries i CSS. Stylingen i det deklarationsblocket gäller då bara vid den angivna breakpointen.
Syntax
Det går också att ange mediatyp i media queries. Vi kan antingen säga att media querien inte gäller för en viss mediatyp, eller bara för en viss mediatyp. Om inte operatorerna not eller only används, så gäller deklarationen alla mediayper.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Olika mediatyper 1
all | Default, gäller alla mediatyper |
print | För printers |
screen | För skärmar, tablets, mobiler etc |
speech | För skärmläsare |
Vanligast är att använda minsta eller största bredden på viewporten, men det finns en uppsjö av möjliga expressions att använda i media quieries. Andra vanliga är att ange enhetstyp eller orientering (portrait eller landscape). De går också att kombinera.
Exempel på media queries
/* styling vid viewport <= 400px */
@media (max-width: 400px) {
/* styling... */
}
/* styling för skärmar vid viewport >= 600px och <= 900px */
@media only screen and (min-width: 600px) and (max-width: 900px) {
/* styling... */
}
/* styling vid viewport >= 30em och landscape orientering */
@media (min-width: 30em) and (orientation) {
/* styling... */
}