Euromind
  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      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

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      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

  • Javascript
    • Javascript

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      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

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      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

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

Historiske administrative geografier i Google Maps

20. april, 2022

Kierkegaard injiceret med Javascript

15. april, 2022

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

Efterlad en kommentar Afbryd svar

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

Seneste indlæg

  • Historiske administrative geografier i Google Maps

    20. april, 2022
  • Kierkegaard injiceret med Javascript

    15. april, 2022
  • Dansk evighedskalender

    7. december, 2020

Kategorier

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

Om mig

Om mig

Per Lindsø Larsen

Freelance fullstack developer bosat 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

      Historiske administrative geografier i Google Maps

      20. april, 2022

      Javascript

      Kierkegaard injiceret med Javascript

      15. april, 2022

      Javascript

      Dansk evighedskalender

      7. december, 2020

      Javascript

      API til Statistikbanken

      21. september, 2019

      Javascript

      IntersectionObserver

      9. august, 2019

  • CSS/SCSS
    • CSS/SCSS

      Kierkegaard injiceret med Javascript

      15. april, 2022

      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

  • C#
    • C#

      Historiske administrative geografier i Google Maps

      20. april, 2022

      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

Populære indlæg

  • 1

    Stylometri i C# – del 2

    7. juni, 2019
  • 2

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

    11. august, 2019
  • 3

    Send email fra Javascript med Gmail API

    21. juni, 2019
  • 4

    Gmail, Yahoo og Outlook som SMTP-server

    18. april, 2019
  • 5

    API til Statistikbanken

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

Læs ogsåx

IntersectionObserver

9. august, 2019

GULP møder AMP – del 1

5. juni, 2019

Dansk evighedskalender

7. december, 2020