Inhoudsopgave:
Video: Website mobiel vriendelijk maken 2024
HTML5- en CSS3-webontwikkelaars kunnen AJAX gebruiken om een responsieve mobiele site te maken. Een manier om een site goed te laten werken op meerdere resoluties, is door verschillende CSS-regels aan te bieden op basis van het gedetecteerde mediatype.
CSS3 heeft een geweldige nieuwe functie, de mediaquery, , waarmee u een mediatype kunt opgeven en verschillende functies van het display kunt bepalen. U kunt deze specificatie gebruiken om een subset van de CSS te bouwen die moet worden gebruikt wanneer de browser een bepaald type of formaat scherm detecteert.
Specificeer een mediatype
Met de regel @media kunt u opgeven welk type uitvoer de opgenomen CSS moet wijzigen. De meest gebruikte mediasoorten zijn scherm, afdrukken, spraak, handheld, projectie en tv. Er zijn meer, maar alleen afdrukken en schermen worden universeel ondersteund.
De volgende code geeft bijvoorbeeld de lettergrootte aan wanneer de gebruiker het document afdrukt:
@media print {body {font-size: 10pt;}}
Deze CSS kan worden ingesloten in een normale CSS document, maar het moet meestal aan het einde van het document worden geplaatst omdat het uitzonderingen op de normale regels bevat. Je kunt zoveel CSS-code plaatsen als je wilt in het @media-element, maar je moet alleen CSS-code plaatsen die relevant is voor de specifieke situatie waarin je geïnteresseerd bent.
Een qualifier toevoegen
Naast het specificeren van het mediatype heeft de @ media-regel nog een zeer krachtige truc. U kunt een speciale kwalificerende voorwaarde op de media toepassen.
Wanneer de browser breder is dan 500 pixels, kunt u zwarte tekst op een witte achtergrond zien. Maar maak het scherm smaller en je ziet iets interessants.
Normaal gesproken zou je deze truc gebruiken om de lay-out te veranderen, maar begin met dit eenvoudigere voorbeeld om van kleur te veranderen. Hier is de code voor dit eenvoudiger voorbeeld:
narrowBlack. html body {kleur: zwart; achtergrondkleur: wit;} @media (max. breedte: 500px) {body {kleur: wit; background-color: black;}}
Qualifier Demo
Probeer het formaat van deze pagina te wijzigen. Wanneer de pagina breder is dan 500 pixels, wordt zwarte tekst op een witte achtergrond weergegeven.
Wanneer de pagina smaller is dan 500 pixels, keren de kleuren om en krijgt witte tekst een zwarte achtergrond.
Zo kunt u een pagina maken die zich aanpast aan de schermbreedte:
-
Bouw uw site zoals gewoonlijk.
Dit is een plaats waar dat hele "afzonderlijke inhoud van lay-out" ding echt loont. Dezelfde HTML heeft twee verschillende stijlen.
-
Pas een CSS-stijl op de normale manier toe.
Bouw uw standaardstijl op de normale manier - sluit de stijl nu in op de pagina met de tag.Je hoofdstijl moet de meest voorkomende zaak behandelen. (Typisch een desktop op volledige grootte.)
-
Bouw een @media-regel.
De regel @media CSS moet aan het einde van de normale CSS staan.
-
Stel een max-width: 500px qualifier in.
Deze kwalificatie geeft aan dat de regels binnen dit segment alleen worden gebruikt als de breedte van het scherm kleiner is dan 500 pixels.
-
Speciale rekenregels in de nieuwe stijliczameling plaatsen.
CSS-regels die u in de @media-regel definieert, worden geactiveerd als de kwalificatie waar is. Gebruik deze regels om de bestaande CSS te overschrijven. Merk op dat je niet alles opnieuw hoeft te definiëren. Geef gewoon regels die logisch zijn in uw specifieke context.
-
Voeg een viewport toe.
In mobiele browsers wordt soms geprobeerd de pagina opnieuw in te delen, zodat deze allemaal tegelijkertijd kan worden bekeken. Dit verslaat het doel van een speciale stijl, dus gebruik de viewport metatag om aan te geven dat de browser de ware breedte moet rapporteren. Het is ook vaak handig om pagina-schalen uit te schakelen omdat het niet langer nodig zou zijn.
In dit voorbeeld past de browser altijd de hoofdstijl (zwarte tekst op een witte achtergrond) toe. Vervolgens wordt gekeken naar de regel @media om te zien of de kwalificatie waar is.
Als de breedte kleiner is dan 500 pixels, wordt de kwalificatie max. Breedte: 500px geëvalueerd als true en is alle CSS-code binnen het @media-segment ingeschakeld. De browser slaat vervolgens beide sets CSS op en past de juiste CSS toe op basis van de status van de regel.
