Euromind
  • Javascript
    • Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 1

      11. august, 2019

  • Javascript
    • Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 1

      11. august, 2019

Euromind
CSS/SCSSJavascriptWebdesign

Media Query i 2019

af Per Lindsø Larsen 18. juli, 2019
skrevet af Per Lindsø Larsen 18. juli, 2019
Media Query i 2019

Media queries er som bekendt CSS-funktionalitet, der gør det muligt at specificere hvilke styles, der skal anvendes i forhold til f.eks. skærmstørrelsen på brugerens enhed. På den måde kan indholdet flyttes rundt og “stackes” på en måde, så brugeren altid får den bedste oplevelse.


Det var nordmanden, Håkon Wium Lie, medstifter af Piratpartiet i Norge, med meget mere, der i en banebrydende phd-afdeling fra 1994 introducerede konceptet for, ikke bare media queries, men CSS i det hele taget. Det tog 18 år før media queries i 2012 blev W3C anbefalet og efterhånden nød fuld browser support.

Centralt i media queries er breakpoints, der sætter betingelserne for, hvornår og hvilken styling, der skal effektueres:

background-color:green;
 
@media only screen and (min-width: 400px) and (max-width: 640px)  {
  background-color: red;
}

I dette tilfælde er baggrundfarven sat til grøn, med mindre skærmbredden er mellem 400px og 640px, i hvilket tilfælde baggrundfarven sættes til rød. 400px og 640px er valgte breakpoints. 

Det er efterhånden blevet et moderne mantra, at breakpoints skal følge indholdet og ikke devices. Indhold skal ombrydes, når det er naturligt at ombryde det, uanset hvilke enheder brugerne ser indholdet på. Det lyder meget fornuftigt, men hvis virkeligheden er, at der i mængden af tilgående devices er nogle markante breakpoint, f.eks. 768px, så er det måske ikke det mest hensigtsmæssigt at indholdet ombrydes naturligt ved 800px. Mon  ikke de fleste kender til oplevelsen af at havne på en webside, hvor man lige præcis er havnet på den forkerte side af en ombrydning. Derfor er det nyttigt i det mindste er være orienteret om, hvordan brugernes skærmopløsning i almindelighed fordeler sig.

Statcounter Globalstats giver et statistisk indblik i, hvorledes det står til med skærmopløsningen på de enheder, der tilgår internettet i Danmark i februar 2019.


Oversigten indikerer, at der stadigvæk er god fornuft i et klassisk valg af breakpoints, som f.eks:

//Small
@media only screen and (max-width: 640px) { } 
// Medium 
@media only screen and (min-width: 641px) { } 
@media only screen and (min-width: 641px) and (max-width: 1024px) { } 
// Large 
@media only screen and (min-width: 1025px) { } 
@media only screen and (min-width: 1025px) and (max-width: 1440px) { } 
// XLarge
@media only screen and (min-width: 1441px) { } 

Opdelingen giver en forholdsvis jævn fordeling af brugere, og selv om udbuddet af devices kostant øges, så rummer denne klassifikation i det store hele stadig en opdeling mellem mobil (small), tables (medium) og desktop (large, xlarge).


 Sass/Scss kan det f.eks gøres således:

$screen: "only screen" !default;
$small-only: "#{$screen} and (max-width: 640px)" !default;
$medium-up: "#{$screen} and (min-width:641px)" !default;
$medium-only: "#{$screen} and (min-width:641px) and (max-width:1024px)" !default;
$large-up: "#{$screen} and (min-width:1025px)" !default;
$large-only: "#{$screen} and (min-width:1025px) and (max-width:1440px)" !default;
$xlarge-up: "#{$screen} and (min-width:1441px)" !default;

Hvorefter media queries let kan anvendes:

.icon {
  position: absolute;
  font-size: 18px;
  @media #{$medium-up} {
      font-size: 25px;
  }


matchMedia og MediaQueryList

Er der behov for ikke blot at sætte CSS, men også ekserkvere javascript, kan det være nyttigt at erindre eksistensen af window.matchMedia og MediaQueryList:

BilledformaterMediaquery
0 Kommentarer
1
FacebookTwitterPinterestEmail
forrige post
Danske Adressers Web API
næste post
RegEx: Unicode og Look Backward i ECMAScript 2018

Relaterede indlæg

Dansk evighedskalender

7. december, 2020

Headless browser på 10 minutter

25. juli, 2020

API til Statistikbanken

21. september, 2019

Variable fonte med dansk tegnsæt i open source

11. august, 2019

IntersectionObserver

9. august, 2019

Progressbar for dokumentposition

31. juli, 2019

Navngivne RegEx-grupper i ECMAScript 2018

29. juli, 2019

RegEx: Unicode og Look Backward i ECMAScript 2018

24. juli, 2019

Danske Adressers Web API

17. juli, 2019

Forbind Visual Studio til IOS devices på 10...

12. juli, 2019

Efterlad en kommentar Afbryd svar

Gem mit navn, email, og website i denne browser til senere kommentarer.

Seneste indlæg

  • Dansk evighedskalender

    7. december, 2020
  • Automatisk køreafstand i Excel

    17. august, 2020
  • Headless browser på 10 minutter

    25. juli, 2020

Kategorier

  • C#
  • CSS/SCSS
  • Excel
  • HTML
  • Javascript
  • Mobile
  • Webdesign
  • Xamarin

Om mig

Om mig

Per Lindsø Larsen

Freelance fullstack developer bo9sat i Aarhus.

Du kan hyre mig til korterevarende projekter eller konkrete opgaveløsninger.

Pæn rabat til non-profit organisationer og foreninger.

Når jeg ikke koder, deltager jeg løbende i diverse spændende forskningsprojekter om alt andet end kodning.

Keep in touch

Facebook Twitter Email Github

Tags

Adresser AMP AMP Story Android API Billedformater Billedoptimering Brand C# Codepen Cordova CPR Crome DevTools CSS Debug Ecmascript Excel Fonte Gmail Gulp HTML Ikoner IOS Javascript JsFiddle Machine Learning Mail Mediaquery ML.NET Mobile RegEx SCSS SMTP Stylometri Visual Studio Webdesign Xamarin

Nyhedsbrev

Timeld nyhedsbrev for info om nye blog-indlæg, tips m.v.

  • Facebook
  • Twitter
  • Email
  • Github

@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273


Tilbage til top
Euromind
  • Javascript
    • Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

      Javascript

      Navngivne RegEx-grupper i ECMAScript 2018

      29. juli, 2019

      Javascript

      RegEx: Unicode og Look Backward i ECMAScript 2018

      24. juli, 2019

  • CSS/SCSS
    • CSS/SCSS

      Dansk evighedskalender

      7. december, 2020

      CSS/SCSS

      Variable fonte med dansk tegnsæt i open source

      11. august, 2019

      CSS/SCSS

      Progressbar for dokumentposition

      31. juli, 2019

      CSS/SCSS

      Media Query i 2019

      18. juli, 2019

      CSS/SCSS

      Danske Adressers Web API

      17. juli, 2019

  • C#
    • C#

      Authentication for IOS og Android med Firebase i…

      4. oktober, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 3

      5. september, 2019

      C#

      Hurtig eksport til Excel

      4. september, 2019

      C#

      Andersen, Grundtvig, Kierkegaard og ML.NET – del 2

      2. september, 2019

      C#

      Andersen, Grundvig, Kierkegaard og ML.NET – del 1

      11. august, 2019

Populære indlæg

  • 1

    Stylometri i C# – del 2

    7. juni, 2019
  • 2

    Send email fra Javascript med Gmail API

    21. juni, 2019
  • 3

    Andersen, Grundvig, Kierkegaard og ML.NET – del 1

    11. august, 2019
  • 4

    Gmail, Yahoo og Outlook som SMTP-server

    18. april, 2019
  • 5

    Registrer Gmail API til brug i javascript

    27. juni, 2019
@2019 - Euromind.com - Code-To-Go. All Right Reserved.
lindsoe@gmail.com - mobil: 42797273

Læs ogsåx

Dansk evighedskalender

7. december, 2020

Gmail, Yahoo og Outlook som SMTP-server

18. april, 2019

Console.log() på stereoider

7. april, 2019