9 – Media queries

Fram tills nyligen, när Flexbox och Grids (se tidigare kapitel) blev standard-verktygen för att bygga layouter, behövde man göra flera olika layouter efter hur mycket skärm-bredd som fanns tillgängligt.

Tillexempel gjorde man en variant för skärmar upp till 480px, en för 768px, en för 992px och en för ännu bredare.

Olika skärmbredder

Detta upplägget är fortfarande väldigt vanligt och det funkar ganska bra. Det största problemet är att nya enheter får nya skärmar med andra upplösningar. Tex är ju upplösningen på en ny Retina-skärm mycket högre än tidigare vanliga datorskärmar.

En bra strategi för layouter är att använda Flexbox och Grids och sedan ev. mindre justeringar via Media Queries. Tex kanske typsnitt behöver justeras i storlek vid mindre skärmar. Det går att göra på andra sätt men Media Queries funkar.

Du kanske också gör en utskriftsvänlig layout där du lägger till addresser till klickbara länkar inom parentes efteråt. Du kanske också tar bort bakgrunder och justerar bredder mot papper istället för mot skärm.

Mitt förslag är att ni börjar jobba på mobil-varianten. När den är klar skalar ni sedan upp kolumnerna för datorvarianten till ni är nöjda.

Du jobbar med något som heter Media Queries. Följande exempel visar hur vi gör ändringar på layouten när bredden blir minst 768 px. Man brukar sätta gränsvärden till 480, 786 och 992 px. Dessa olika bredder är bara ungefärliga och ändrar sig hela tiden i takt med att skärmar får bättre upplösningar.

Du börjar med din vanliga CSS och sedan lägger du till följande rader längst ner. Här i gör du dina ändringar för de olika bredderna.

@media screen and (min-width: 480px) {
  h1 {
    font-size: 14px;
  }
}
 
@media screen and (min-width: 768px) {
  body {
    background-color: red;
  }
}

 @media screen and (min-width: 992px) {}

Utskrift

Ibland vill du kunna kontrollera vad på en hemsida som visas när du skriver ut den. Några vanliga justeringar är att dölja menyer och kontaktformulär eller att ändra storlek på kolumner och typsnitt.

Man kan också vilja ändra färger. Webbläsaren hjälper oftast automatiskt dig att justera så du inte skriver ut svart bakgrund med vit text men det kan ändå vara värt att justera färger manuellt också. Ljusgrå text på vitt papper är ofta för svårt att läsa.

Alla ändringarna för en utskriftsvänlig sida görs i CSS. Tänk dig utskriften som en vy på din sida. Du arbetar med Media Queries här också.

@media print {
  
  article,
  aside {
    float: initial;
    width: auto;
  }

  a:after{
    content:" (" attr(href) ") ";
  }
}

När du sitter och jobbar med din print-css kan du börja med att testa mot förhandsgranskningen i webbläsaren. Välj skriv ut och titta hur det ser ut. När du börjar bli färdig gör du en riktig testutstkrift för att säkra att du fått rätt på alla delar.

Övningar

  • Börja med att göra en enkel grund där ni ändrar bakgrundsfärg på hela sidan för de olika bredderna. Behöver du hjälp finns ett färg-exempel.
  • Behöver ni sedan så uppdatera era hemsidor.
  • Lägg till en vy för utskrifter.