CSS @media device responsive

Informatie

Mediaquery’s kunnen worden gebruikt om veel dingen te controleren, zoals:

• Breedte en hoogte van het venster.
• Breedte en hoogte van het apparaat.
• Oriëntatie (staat de tablet/telefoon in liggende of staande modus?) oplossing.

Het gebruik van mediaquery’s is een populaire techniek voor het leveren van een op maat gemaakte stylesheet (responsive webdesign) aan desktops, laptops, tablets en mobiele telefoons.

U kunt mediaquery’s ook gebruiken om te specificeren dat bepaalde stijlen alleen voor afgedrukte documenten of voor schermlezers zijn (mediatype: print, scherm of spraak).

Naast mediatypen zijn er ook mediafuncties. Mediafuncties bieden meer specifieke details voor mediaquery’s door te testen op een specifieke functie van de user-agent of het weergaveapparaat. U kunt bijvoorbeeld stijlen toepassen op alleen die schermen die groter of kleiner zijn dan een bepaalde breedte.

Voorbeeld

– NA

Kopie script

Select & Copy Voorbeeld 1 
@media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @media only screen and (max-device-width: 480px) { /* STYLES HERE */ }

Select & Copy Voorbeeld 2
<style> @media screen and (min-width: 769px) { .theme-page-header-area { padding: 70px 0 70px 0; } } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { .theme-page-header-area { padding: 15px 0 15px 0; } } @media only screen and (max-device-width: 480px) { .theme-page-header-area { padding: 3% 0 3% 0; } } </style>