Maak een webpagina.
Laatst bijgewerkt op
27 apr. 2021
U kunt mediaquery's gebruiken om CSS-bestanden op te geven op basis van de gerapporteerde kenmerken van een apparaat (responsief ontwerp). De browser op het apparaat controleert de mediaquery en gebruikt het bijbehorende CSS-bestand om de webpagina weer te geven.
In het volgende voorbeeld geeft de mediaquery het bestand phone.css op voor apparaten met een breedte van 300-320 pixels.
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
Voor een uitgebreide inleiding over media query's zie Don Booth's artikel op Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
Voor meer informatie over media queries van de W3C zie www.w3.org/TR/css3-mediaqueries/.
Een mediaquery maken
In Dreamweaver kun je een sitebreed media query-bestand maken of een documentspecifieke media query.
Sitebreed media query-bestand
Specificeert weergave-instellingen voor alle pagina's van je site die het bestand bevatten.
Het sitebrede media query-bestand fungeert als de centrale opslagplaats voor alle media queries in je site.Nadat je dit bestand hebt gemaakt, koppel je het aan pagina's in je site die de media queries in het bestand moeten gebruiken voor hun weergave.
Documentspecifieke media query
De media query wordt direct in het document ingevoegd en de pagina wordt op basis van deze media query weergegeven.
Selecteer Wijzigen > Mediaquery's.
Voer een van de volgende handelingen uit:
Om een sitebreed media query-bestand te maken, selecteer je Site Wide Media Queries File.
Selecteer Dit document als een documentspecifieke mediaquery wilt maken.
Ga als volgt te werk voor een mediaquerybestand voor de hele site:
Klik op Opgeven.
Selecteer Nieuw bestand maken.
Geef een naam voor het bestand op en klik op OK.
Het is mogelijk dat sommige apparaten hun werkelijke breedte niet rapporteren.Om apparaten te dwingen hun werkelijke breedte te rapporteren, zorg je ervoor dat de optie Force Devices To Report Actual Width is ingeschakeld.
De volgende code wordt in je bestand ingevoegd wanneer je deze optie kiest.
<meta name="viewport" content="width=device-width">
Voer een van de volgende stappen uit:
Klik op "+" om de eigenschappen voor het media query-bestand te definiëren.
Klik op Default Presets als je wilt beginnen met standaardvoorinstellingen.
Selecteer rijen in de tabel en bewerk hun eigenschappen met behulp van de opties onder Properties.
Beschrijving
De beschrijving van het apparaat waarvoor het CSS-bestand moet worden gebruikt.Bijvoorbeeld telefoon, televisie, tablet, enzovoort.
Minimumbreedte en Maximumbreedte
Het CSS-bestand wordt gebruikt voor apparaten waarvan de gerapporteerde breedte binnen de opgegeven waarden valt.
Notitie
Laat Minimumbreedte of Maximumbreedte leeg als u niet een specifiek bereik voor een apparaat wilt instellen. Het is bijvoorbeeld gebruikelijk om Minimumbreedte leeg te laten als u het bestand gaat gebruiken voor telefoons, die een breedte van 320 pixels of minder hebben.
CSS-bestand
Selecteer Use Existing File en verken naar het CSS-bestand voor het apparaat.
Als je een CSS-bestand wilt specificeren dat je nog moet maken, selecteer je Create New File.Voer de naam van het CSS-bestand in.Het bestand wordt gemaakt als u op OK klikt.
Klik op OK.
Er wordt een nieuw bestand gemaakt voor het mediaquerybestand voor de hele site. Sla het bestand op.
Sitebreed media query: Voor bestaande pagina's zorg je ervoor dat je het media query-bestand opneemt in alle pagina's in de <head> tag.
Voorbeeld van een media query-koppeling waarbij mediaquery_adobedotcom.css het sitebrede media query-bestand is voor de site www.adobe.com:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Een bestaand mediaquerybestand gebruiken
Maak een webpagina of open een bestaande webpagina.
Selecteer Wijzigen > Mediaquery's.
Selecteer Bestand met mediaquery's voor de hele site.
Klik op Opgeven.
Selecteer Bestaand bestand gebruiken als je al een CSS-bestand hebt gemaakt met de mediaquery.
Klik op het bladerpictogram om naar het bestand te bladeren en dit op te geven. Klik op OK.
Selecteer Bestand met mediaquery's voor de hele site.
Om apparaten te dwingen hun werkelijke breedte te rapporteren, zorg je ervoor dat de optie Apparaten dwingen werkelijke breedte te rapporteren is ingeschakeld.De volgende code wordt in je bestand ingevoegd wanneer je deze optie kiest.
<meta name="viewport" content="width=device-width">
Klik op OK.
Kies een ander sitebreed media query-bestand
Gebruik deze procedure om het site-brede media queries-bestand te wijzigen dat je hebt ingesteld in het dialoogvenster Media Queries.
Selecteer Site > Sites beheren.
Selecteer uw site in het dialoogventer Sites beheren.
Klik op Bewerken. Het dialoogvenster Site-instelling wordt weergegeven.
Selecteer Lokale informatie bij Geavanceerde instellingen in het linkerdeelvenster.
Klik in Sitebreed Media Query-bestand in het rechterpaneel op Verkennen om het media query CSS-bestand te selecteren.
Notitie
Het wijzigen van het site-brede media queries-bestand heeft geen invloed op documenten die gekoppeld zijn aan een ander of vorig site-breed media query-bestand.
Klik op Opslaan.
Webpagina's weergeven op basis van mediaquery
Afmetingen die zijn opgegeven in een media query verschijnen in de opties voor de knop/venstergrootte Multiscreen.Wanneer je een Dimension selecteert uit het menu, zie je de volgende wijzigingen:
De weergavegrootte wordt ingesteld op de opgegeven afmetingen. De grootte van het documentframe blijft ongewijzigd.
Het CSS-bestand dat is opgegeven in de media query wordt gebruikt om de pagina weer te geven.
Verwante informatie
Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.
