Media queries

Med @media queries kan vi lage regler som virker forskjellig avhengig av om vi skal ha utskrift (@media print), vise på skjerm (@media screen) eller også undersøke bredden på skjermen (@media screen and (max-width:1024px ) { ... }

I eksemplet under skal vi vise bilder med layout grid (6x) dersom vi har en stor skjerm, grid (4x) dersom mellomstor, (3x) dersom liten, (2x) dersom veldig liten - og skifte til layout:flex dersom bredden er mindre enn 450px.

:root {
  --display: grid;
  --gridlate: repeat(6, 1fr);
  --marg: 1em;
  --topmarg: 1em;
  --width: 200px;
}

@media all and (max-width: 1450px) {
  :root {
    --gridlate: repeat(4, 1fr);
  }
}

@media all and (max-width: 950px) {
  :root {
    --gridlate: repeat(3, 1fr);
    --marg: 0.5em;
  }
}

@media all and (max-width: 600px) {
    :root {
        --gridlate: repeat(2, 1fr);
        --marg: 0.2em;
    }
  }

@media all and (max-width: 450px) {
  :root {
    --display: flex;
    --marg:auto;
    --topmarg: 1em;
    --width: 300px;
  }
}

#main {
  display: var(--display);
  grid-template-columns: var(--gridlate);
  flex-direction: column;
}

#main > div {
    width: var(--width);
    height: calc(var(--width) - 50px);
    border: solid gray 1px;
    margin: var(--marg);
    margin-top:var(--topmarg);
}

#main > div:nth-of-type(odd) {
    background-color: red;
}

Merk at jeg bruker --variable som er definert i :root{ }.
Dermed kan jeg endre verdiene på disse i de forskjellige @media-reglene og bruke samme css-regel for alle lenger nede. Der henter jeg verdien fra variablene med var(--variabelnavn) .

Merk at jeg beregner height på denne måten: height: calc(var(--width) - 50px);
Dermed har jeg en bredde som er gitt av --width, og en høyde som beregnes ut fra samme verdi.

Bruk av @media print

Når du skal skrive ut ønsker du ofte å fjerne elementer som ikke virker på papir - tenk på knapper og andre meny-elementer.
Ofte ønsker du også å styre hvordan siden deles opp

@media print {
  figure {
    page-break-inside: avoid;
  }
  article {
    page-break-after: always;
  }
  button, .menu {
    display: none;
  }
  h1,h2,h3,h4,h5,h6 {
    page-break-after: avoid;
  }
}

Her ønsker jeg ikke side-skift mellom bilde og forklarende tekst (de er begge inne i fugure tag-en).
Jeg vil ha en ny side etter en article.
Overskriften skal være på samme side som teksten den er tilknytta.
Knapper skal ikke skrives ut.
Ikke vis menyer (som har klassen .menu)