Operation Manual

Visuele mediaquery's

Naar boven

Mediaquery's is een CSS3-module waarmee u responsieve websites kunt ontwerpen door verschillende

stijlregels te definiëren voor verschillende apparaten of mediatypen. Op basis van deze regels wordt de

weergegeven inhoud aangepast aan verschillende voorwaarden, zoals schermgrootten, grootten van

browservensters, apparaatgrootten en richting, en resolutie.

U kunt de regel @media gebruiken om mediaquery's toe te voegen aan uw CSS. Ook kunt u afzonderlijke

stijlpagina's voor de verschillende mediatypen maken en deze vervolgens aanroepen met de volgende

syntaxis:

De browser op het apparaat controleert de mediaquery en gebruikt het bijbehorende CSS-bestand om de

webpagina weer te geven.

Zie dit artikel voor meer informatie.

U kunt de mediaquery's toevoegen door de relevante code toe te voegen aan uw HTML- of CSS-bestanden.

Daarnaast kunt u eenvoudig in Dreamweaver mediaquery's maken en beheren met:

Visuele-mediaquerybalk

CSS ontwerpen

Het fundamentele verschil tussen deze twee methoden is het visuele aspect. Gebruik CSS ontwerpen als u

er de voorkeur aan geeft om uw code te schrijven en de wijzigingen vervolgens te bekijken in Live View. Als

u liever uw pagina visualiseert op verschillende onderbrekingspunten en tegelijkertijd ontwerpwijzigingen wilt

aanbrengen, kunt u beter de visuele-mediaquerybalk gebruiken.

Visuele-mediaquerybalken

Visuele mediaquery's weergeven of verbergen

Schakelen tussen onderbrekingspunten

Mediaquery's visueel bewerken

Nieuwe mediaquery's toevoegen

Mediaquery's verwijderen

De code voor mediaquery's weergeven

Visuele-mediaquerybalken

De visuele-mediaquerybalken vormen een visuele voorstelling van de mediaquery's op een pagina. Met deze

balken kunt u uw webpagina op verschillende onderbrekingspunten visualiseren en bekijken hoe de

verschillende componenten van uw webpagina opnieuw worden geplaatst in de verschillende viewports.

Wanneer u uw pagina bekijkt in verschillende viewports, kunt u specifieke ontwerpwijzigingen voor een

viewport aanbrengen zonder dat dit invloed heeft op het paginaontwerp in andere viewports.

217