Bredd-, höjd- och orienteringsfrågor

Funktionen width riktar sig mot viewportens bredd. Använd min-width och max-width för att definiera intervall.

Funktionen height riktar sig mot viewportens höjd. Den är användbar för korta viewporter, till exempel telefoner i landskapsläge, där det vertikala utrymmet är begränsat.

Identifiera korta viewporter och minska utfyllnad och höjder som annars skulle få innehållet att flöda över:

Funktionen orientation identifierar om viewporten är högre (portrait) eller bredare (landscape) än den är i den andra riktningen.

Rikta dig mot skärmar med hög DPI (Retina) med funktionen resolution eller den icke-standardiserade men brett stödda funktionen -webkit-device-pixel-ratio.

Rikta dig mot specifika bildförhållanden för viewporten. Det är användbart när innehåll ska centreras på olika sätt i viewporter med förhållandet 4:3 respektive 16:9.

Funktionen hover: hover identifierar om den primära inmatningsenheten är en exakt pekare som kan hovra. Den är användbar för stilar som är specifika för pekskärmsenheter.

pointer: fine är en exakt muspekare; pointer: coarse är ett finger eller en penna. Det är användbart när storleken på tryckmål ska anpassas.

Skapa regler som är specifika för telefoner i landskapsläge genom att kombinera min-width med max-height:

CSS media queries riktar sig mot viewporten (webbläsarfönstret), inte mot den fysiska enhetens skärmdimensioner. När du ändrar storlek på ett webbläsarfönster på en dator ändras viewportens bredd i realtid.

Media queries och viewportenheter (vw, vh) reagerar på samma viewportdimensioner. Använd media queries för layoutändringar och viewportenheter för flytande storlek inom en layout.

Mediefunktioner omfattar width, height, orientation, resolution, hover och pointer. Använd dem för att anpassa layouter efter viewportens dimensioner och enhetens funktioner. Funktionerna hover och pointer hjälper dig att skilja mellan pekskärms- och musenheter, utöver att bara beakta skärmstorleken.