Operation Manual
501
Laatst bijgewerkt 2/5/2011
Hoofdstuk 16: Ontwerpen voor meerdere
schermen en apparaten
Mediaquery's maken (CS5.5)
U kunt mediaquery's gebruiken om CSS-bestanden op te geven op basis van de gerapporteerde kenmerken van een
apparaat. 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)">
Raadpleeg het artikel van Don Booth in Adobe Developer Center op
www.adobe.com/go/learn_dw_medquery_don_nl voor een uitgebreide inleiding op mediaquery's.
Zie www.w3.org/TR/css3-mediaqueries/ voor meer informatie over mediaquery's van de W3C.
Een mediaquery maken
In Dreamweaver kunt u een mediaquerybestand voor de hele site of een documentspecifieke mediaquery maken.
Mediaquerybestand voor de hele site Hiermee geeft u de weergave-instellingen op voor alle pagina's in uw site die het
bestand bevatten.
Het mediaquerybestand voor de hele site is de centrale opslagplaats voor alle mediaquery's in uw site. Nadat u dit
bestand hebt gemaakt, moet u een koppeling naar dit bestand maken vanaf de pagina's in uw site die de mediaquery's
in het bestand moeten gebruiken voor de weergave.
Documentspecifieke mediaquery De mediaquery wordt rechtstreeks ingevoegd in het document en de pagina wordt
weergegeven op basis van de ingevoegde mediaquery.
1 Maak een webpagina.
2 Selecteer Wijzigen > Mediaquery's.
3 Voer een van de volgende handelingen uit:
• Selecteer Bestand met mediaquery's voor de hele site als u een bestand met mediaquery's voor de hele site wilt
maken.
• Selecteer Dit document als een documentspecifieke mediaquery wilt maken.
4 Ga als volgt te werk voor een mediaquerybestand voor de hele site:
a Klik op Opgeven.
b Selecteer Nieuw bestand maken.
c Geef een naam voor het bestand op en klik op OK.
5 Het is mogelijk dat sommige apparaten niet de werkelijke apparaatbreedte doorgeven. Controleer of de optie
Doorgeven van werkelijke breedte door apparaten forceren is ingeschakeld om ervoor te zorgen dat apparaten de
werkelijke breedte doorgeven.