NemProgrammering.dk logo
nordicway webhotel

CSS display og media queries

CSS kursus | Lær CSS for begyndere
WordPress hjemmeside hjælp

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

Denne lektion skal handle om CSS display egenskaben samt media queries. Vi skal prøve at arbejde med forskellige værdier af display, samt se hvordan display:none kan anvendes sammen med to forskellige media queries.

Øvelser:
1 - Undersøg via nettet hvad forskellige elementers default display værdi er. Prøv at lave disse elementer i din HTML samt herefter ændre deres default værdi via din CSS.
2 - Lav en div. Lav en række media queries som ændrer størrelsen og baggrundsfarven på denne div ved over 200px, 500px og 700px. Du bestemmer selv, om du gøre det med min-width, max-width eller måske en kombination.

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, introduktion til CSS og display og media queries

Her har du kildekoden

<!DOCTYPE html>
<html>
<head>
  <title>Lektion 12</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="Lektion12.css">
</head>
<body>
  <p>
  ikke span, <span class="span">SPAN</span> <span class="span">SPAN</span>, ikke span
  </p>
  <p class="test_paragraf">
    paragraf
  </p>
  <p class="test_paragraf">
    paragraf
  </p>
</body>
</html>

Her har du kildekoden

.span {
  background-color: red;
  display: block;
}
.test_paragraf {
  background-color: yellow;
  display: inline;
}

@media screen and (max-width:300px) {
  .span {
    display: none;
  }
}

@media screen and (min-width:500px) {
  .test_paragraf {
    display: block;
  }
}

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder og vi eller en anden lœser vil svare hurtigst muligt!

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    19-03-2019

Hej Steffen, Tak for din kommentar/spørgsmål. Du har fuldstændig ret, media-queries går fra højeste til laveste pixel-bredde - det er sådan de fungerer. Er der et problem i det for jer? Mvh.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Steffen    14-03-2019

Tak for endnu en god video: Spørgsmål: (har prøvet at undersøge inde på w3shools under media queries eksempler) Hvis vi ønsker kun at benytte max-width fra 992px til 600px og videre ned til 300px. Så virker det kun hvis vil sætter det i den rækkefølge og ikke i en vilkårlig rækkefølge eller fra 300px til 600px og til sidst 992px. Simplificeret eksempel på overstående (uden alle gyldige tegn). Korrekt rækkefølge i CSS = fungere: @media screen and (max-width: 992px)... @media screen and (max-width: 600px)... @media screen and (max-width: 300px)... Forkert rækkefølge i CSS = fungere IKKE: @media screen and (max-width: 300px)... @media screen and (max-width: 600px)... @media screen and (max-width: 992px)... Håber I kan være behjælpelig endnu engang :)