Proportionella vs fasta media queries

Publicerad lördag den 3 Jan 2015 22:30

Det är snart tre år sedan Lyza Gardner skrev artikeln The EMs have it: Proportional Media Queries FTW!. Slutsatserna gäller fortfarande – använd proportionella media queries så att din layout anpassar sig då användaren ändrar inställning för zoom och textstorlek.

Jag har gjort lite tester i Chrome (39), Firefox (34), Safari (8) och Internet Explorer (11) och här är några noteringar:

Zoom

Vid zoom i webbläsaren så spelar det faktiskt ingen roll om du har använt proportionella (em) eller fasta (px) media queries. Båda anpassar sig vid zoom och webbläsaren räknar om brytpunkten till bredden delat på zoomnivån.

Här är ett exempel på beteendet där Chrome växlar mellan 100% och 200% zoom. Den första grå rutan använder en fast media query och den andra en proportionell. Siffran i rutan visar vilken media query som är aktiv.

Jag hittade en avvikelse från det här beteendet: Safari har en bug (?) som zoomar proportionella media queries dubbelt. Om du har fönstret vid 640px bredd och 100% zoom så motsvarar det en brytpunkt på 40em. Om du sedan zoomar till ca 209% – Safari har konstiga zoomsteg – så kommer layouten att använda den fasta brytpunkt som motsvarar 309px på samma sätt som alla andra webbläsare jag testade. För proportionella media queries borde zoomen ge motsvarande proportionella brytpunkt, ca 19em. Safari zoomar den istället dubbelt till 9.3125em. Så hör ser det ut:

Ändra webbläsarens inställning för textstorlek

Det här är det fall där det faktiskt spelar roll om du använder em eller px. Det har länge varit känt att man skall använda relativa mått i font-size så inte användarens möjlighet att ändra inställningen för textstorlek i webbläsaren begränsas. Motsvarande gäller för relativa eller fasta enheter i media queries. Om du vill bygga tillgängligt bör du använda proportionella så att layouten anpassar sig till textstorleken. Med fasta är risken stor att layouten går sönder om användaren ändrar textstorlek.

Här är ett typexempel på hur fasta och proportionella media queries beter sig (Chrome): Textstorleken ändras från 16px till 28px i inställningarna. Texten förstoras, men den fasta media queryn påverkas inte. Den proportionella räknas om i relation till förändringen i textstorlek.

Det här fungerar bra i alla testade webbläsare, men det finns såklart ett par specialfall. Safari och Internet Explorer låter i inställningarna användaren peka ut en egen CSS-fil som används på alla besökta webbsidor. Motsvarande kan göras i de övriga webbläsarna också, men där är det mycket svårare att få till och inte enkelt åtkomigt som en vanlig inställning. Både Safari och Internet Explorer har samma beteende – om jag med en egen CSS-fil ändrar textstorleken så påverkas inte media queries! Så här ser det ut i Internet Explorer:

Som en liten bonus testade jag hur Mobile Safari beter sig i iOS 8. Jag använde där inställningen för dynamisk textstorlek och den särskilda CSS som krävs för att det ska fungera (se Dynamisk textstorlek i Mobile Safari). Mobile Safari beter sig då som Safari och Internet Explorer med egen CSS – textstorleken ändras men media queries påverkas inte. Så här ser det ut:

Sammanfattning

Att använda relativa mått för font-size och i media queries gör din webbsida mer tillgänglig – användaren får möjlighet att ändra textstorlek efter behov. Det är också ett smart och säkert sätt att bygga på eftersom din layout då kommer att anpassa sig efter textstorleken. Använder du fasta mått och användaren ändrar textstorlek (vilket är fullt möjligt i vissa webbläsare) så riskerar din layout annars att gå sönder då texten blir oväntat stor i vissa element. Det finns dock tillfällen där proportionella media queries inte påverkas av ändring av textstorleken så testa även de särskilda fallen, t.ex. med egen CSS i Safari, för att se om det finns något du kan göra för att layouten ska fungera även där.

Testsidan jag har använt i skärmdumparna hittar du här: http://demos.henrikekelof.se/px-vs-em-mediaqueries/

Kort adress till sidan: http://eklf.se/pmq