Responsive web design basics

• stel de viewport
• Size content in op de viewport
• gebruik css media queries voor responsiviteit
• Hoe breekpunten te kiezen
• bekijk Media query breekpunten in Chrome DevTools

het gebruik van mobiele apparaten om op het web te surfen blijft in een astronomisch tempo groeien, en deze apparaten worden vaak beperkt door Weergavegrootte en vereisen een andere benadering van hoe de inhoud op het scherm wordt weergegeven.,

Responsive web design, oorspronkelijk gedefinieerd door Ethan Marcotte in een lijst Apart, reageert op de behoeften van de gebruikers en de apparaten die ze gebruiken. De lay-out verandert op basis van de grootte en de mogelijkheden van het apparaat. Op een telefoon zien gebruikers bijvoorbeeld inhoud in één kolomweergave; een tablet kan dezelfde inhoud in twee kolommen weergeven.

Er bestaan veel verschillende schermgroottes voor telefoons,” phablets”, tablets, desktops, spelconsoles, tv ‘ s en zelfs wearables., Schermformaten veranderen altijd, dus het is belangrijk dat uw site zich kan aanpassen aan elke schermgrootte, vandaag of in de toekomst. Bovendien hebben apparaten verschillende functies waarmee we ermee omgaan. Sommige bezoekers gebruiken bijvoorbeeld een touchscreen. Modern responsive design houdt rekening met al deze dingen om de ervaring voor iedereen te optimaliseren.

set the viewport #

pagina ‘ s die geoptimaliseerd zijn voor verschillende apparaten moeten een Meta viewport tag in de kop van het document bevatten.Een Meta viewport tag geeft de browser instructies over hoe u de afmetingen en schaling van de pagina kunt beheren.,

om de beste ervaring te bieden, geven mobiele browsers de pagina weer op een bureaubladschermbreedte (meestal ongeveer 980px, hoewel dit op verschillende apparaten varieert), en proberen vervolgens de inhoud er beter uit te laten zien door lettergroottes te vergroten en de inhoud te schalen zodat deze op het scherm past.Dit betekent dat lettergroottes inconsistent kunnen lijken voor gebruikers,die mogelijk moeten dubbeltikken of knijpen naar zoomin om de inhoud te zien en ermee te communiceren.,

met behulp van de Meta viewport-waarde width=device-width instrueert de pagina om de breedte van het scherm te matchen in apparaatonafhankelijke pixels. Een apparaat (of dichtheid) onafhankelijke pixel is een representatie van een enkele pixel, die op een scherm met hoge dichtheid kan bestaan uit vele fysieke pixels. Hierdoor kan de pagina terugvloeiencontent aan verschillende schermformaten overeenkomen, Of weergegeven op een kleine mobiele telefoon of een grote desktop monitor.,

sommige browserskeep de pagina ‘ s breedte constant bij het draaien naar landscapemode, en zoom in plaats van reflow om het scherm te vullen., Het toevoegen van de waardeinitial-scale=1 instrueert browsers om een 1:1 relatie tot stand te brengen tussen CSSpixels en apparaat-onafhankelijke pixels, ongeacht de oriëntatie van het apparaat, en stelt de pagina in staat om te profiteren van de volledige landschapsbreedte.

Het heeft geen <meta name="viewport"> tag met width of initial-scaleLighthouse audit kan u helpen het proces te automatiseren om ervoor te zorgen dat uw HTML-documenten de viewport meta tag correct gebruiken.,

Zorg voor een toegankelijke viewport #

naast het instellen van een initial-scaleje kunt ook instellen met de volgende kenmerken in het kijkvenster:

• minimum-scale
• maximum-scale
• user-scalable

Wanneer dit is ingesteld, kunt u deze uitschakelen van de gebruiker”s de mogelijkheid in te zoomen op de viewport,mogelijk veroorzaakt toegankelijkheid.Daarom raden we het gebruik van deze attributen aan.,

Grootte inhoud naar de viewport #

op zowel desktop-als mobiele apparaten worden gebruikers gebruikt om websites verticaal maar niet horizontaal te scrollen;de gebruiker wordt gedwongen horizontaal te scrollen of uit te zoomen om de hele pagina te zien resulteert in een slechte gebruikerservaring.

bij het ontwikkelen van een mobiele site met een Meta viewport tag,is het gemakkelijk om per ongeluk pagina-inhoud te maken die niet helemaal past binnen de opgegeven viewport.Bijvoorbeeld, een afbeelding die wordt weergegeven op een breedte breder dan de viewport kan ervoor zorgen dat de viewport horizontaal scrolt.,U moet deze inhoud aanpassen om binnen de breedte van de viewport te passen,zodat de gebruiker niet horizontaal hoeft te scrollen.

De inhoud is niet correct aangepast voor de viewportLighthouse-audit kan u helpen het proces van het detecteren van overvolle inhoud te automatiseren.

Images #

een afbeelding heeft vaste afmetingen en als het groter is dan de viewport zal een schuifbalk veroorzaken.Een veelgebruikte manier om met dit probleem om te gaan is om alle afbeeldingen een max-width van 100%te geven.,Dit zal ervoor zorgen dat de afbeelding krimpt om de ruimte die het heeft te passen,moet de viewport grootte kleiner zijn dan de afbeelding.Omdat demax-width, in plaats van dewidth100%is,zal de afbeelding niet groter worden dan zijn natuurlijke size.It is over het algemeen veilig om de volgende toe te voegen aan uw stylesheets zodat u nooit een probleem met afbeeldingen waardoor een schuifbalk zal hebben.,

voeg de afmetingen van de afbeelding toe aan het img-element #

bij gebruik van max-width: 100% overschrijft u de natuurlijke afmetingen van de afbeelding,maar u moet nog steeds width en height attributen op uw <img> tag.Dit komt omdat moderne browsers deze informatie gebruiken om ruimte te reserveren voor de afbeelding voordat deze wordt geladen, dit zal helpen om lay-out verschuivingen te voorkomen als inhoud wordt geladen.,

Layout #

aangezien schermafmetingen en-breedte in CSS-pixels sterk verschillen tussen apparaten(bijvoorbeeld tussen telefoons en tablets, en zelfs tussen verschillende telefoons), moet de inhoud niet afhankelijk zijn van een bepaalde viewport breedte om goed te renderen.

In het verleden had deze instelling elementen nodig die gebruikt werden om lay-out te maken in percentages.In in het voorbeeld hieronder ziet u een indeling in twee kolommen met zwevende elementen, met pixels in grootte.Zodra de viewport kleiner wordt dan de totale breedte van de kolommen, moeten we horizontaal scrollen om de inhoud te zien.,

door percentages voor de breedtes te gebruiken, blijven de kolommen altijd een bepaald percentage van de container.Dit betekent dat de kolommen smaller worden, in plaats van een schuifbalk te maken.

moderne CSS-opmaaktechnieken zoals Flexbox, rasteropmaak en Multicolma maken het maken van deze flexibele rasters veel gemakkelijker.,

Flexbox #

Deze opmaakmethode is ideaal wanneer u een set items van verschillende grootten hebt en u wilt dat ze comfortabel in een rij of rijen passen,waarbij kleinere items minder ruimte innemen en grotere items Meer ruimte krijgen.

In een responsief ontwerp kunt u Flexbox gebruiken om items als een enkele rij weer te geven, of omwikkeld op meerdere rijen naarmate de beschikbare ruimte afneemt.

Lees meer over Flexbox.

CSS-Rasterlayout #

CSS-Rasterlayout maakt het eenvoudig maken van flexibele rasters mogelijk.,Als we het eerder zwevende voorbeeld beschouwen, in plaats van onze kolommen met percentages aan te maken,kunnen we rasterlay-out en de fr eenheid gebruiken,die een deel van de beschikbare ruimte in de container vertegenwoordigt.

raster kan ook worden gebruikt om reguliere rasterindelingen te maken,met zoveel items als passend is.Het aantal beschikbare tracks zal worden verminderd als de schermgrootte shrinks.In de onderstaande demo, we hebben zoveel kaarten als past op elke rij,met een minimale grootte van 200px.,

Lees meer over CSS-rasterindeling

lay-out met meerdere kolommen #

voor sommige typen lay-out kunt u de lay-out met meerdere kolommen (Multicol) gebruiken, die responsieve aantallen kolommen kan aanmaken met column-width property.In de demo hieronder, kunt u zien dat kolommen worden toegevoegd als er ruimte is voor een andere200px kolom.,

Lees meer over Multicol

gebruik css media queries voor responsiviteit #

soms moet u uitgebreidere wijzigingen aanbrengen in uw layout om een bepaalde schermgrootte te ondersteunen dan de technieken hierboven toestaan.Dit is waar Media queries nuttig worden.

Media queries zijn eenvoudige filters die kunnen worden toegepast op CSS-stijlen.,Ze maken het gemakkelijk om stijlen te veranderen op basis van de typen apparaten die de inhoud weergeven,of de kenmerken van dat apparaat, bijvoorbeeld breedte, hoogte, oriëntatie, mogelijkheid om te zweven,en of het apparaat wordt gebruikt als een touchscreen.,

om verschillende afdrukstijlen aan te bieden,moet u een type uitvoer richten zodat u een stijlblad met afdrukstijlen als volgt kunt opnemen:

als alternatief kunt u afdrukstijlen in uw hoofdstijl opnemen met behulp van een mediaquery:

voor responsive web design vragen we meestal naar de functies van het apparaat om een andere lay-out voor kleinere schermen te bieden, of wanneer we ontdekken dat onze bezoeker een touchscreen gebruikt.

media queries gebaseerd op viewport grootte #

Media queries stellen ons in staat om een responsieve ervaring te creëren waar specifieke stijlen worden toegepast op kleine schermen, grote schermen en overal daartussenin.De functie die we hier detecteren is daarom schermgrootte, en we kunnen testen voor de volgende dingen.,

• width (min-width, max-width)
• height (min-height, max-height)
• orientation
• aspect-ratio

All of these features have excellent browser support,for more details including browser support information seewidth,height,orientation, andaspect-ratio on MDN.

media queries gebaseerd op device capability #

gezien het bereik van apparaten die beschikbaar zijn, kunnen we niet aannemen dat elk groot apparaat een gewone desktop of laptop computer is, of dat mensen alleen een touchscreen gebruiken op een klein apparaat.,Met een aantal nieuwere toevoegingen aan de media queries specificationwe kunnen testen voor functies, zoals het type pointer gebruikt om te communiceren met het apparaat en of de gebruiker kan zweven over elementen.

• hover
• pointer
• any-hover
• any-pointer

probeer deze demo te bekijken op verschillende apparaten,zoals een gewone desktopcomputer en een telefoon of tablet.

deze nieuwere functies hebben goede ondersteuning in alle moderne browsers., Meer informatie vindt u op de MDN-pagina ‘ s voor Hover,any-hover,pointer,any-pointer.

gebruikmakend van any-hover en any-pointer #

de eigenschappen any-hover en any-pointer test of de gebruiker de mogelijkheid heeft om te zweven, of gebruik dat type pointer zelfs als het niet de primaire manier waarop ze omgaan met hun device.Be zeer voorzichtig bij het gebruik van deze.Een gebruiker dwingen om over te schakelen naar een muis wanneer ze hun touchscreen gebruiken is niet erg vriendelijk!,any-hover en any-pointer kunnen echter nuttig zijn als het belangrijk is om uit te zoeken welk apparaat een gebruiker heeft.Bijvoorbeeld, een laptop met een touchscreen en trackpad moet overeenkomen met grove en fijne aanwijzers,in aanvulling op de mogelijkheid om te zweven.

hoe breekpunten te kiezen #

definieer geen breekpunten op basis van apparaatklassen.Het definiëren van breekpunten op basis van specifieke apparaten, producten, merknamen of besturingssystemen die vandaag in gebruik zijn,kan resulteren in een onderhoudsnachtmerrie.,In plaats daarvan moet de inhoud zelf bepalen hoe de lay-out zich aanpast aan de container.

kies belangrijke breekpunten door klein te starten en vervolgens #

te bewerken ontwerp eerst de inhoud zodat deze op een klein schermformaat past, en breid het scherm uit totdat een breekpunt nodig is.Hiermee kunt u breekpunten optimaliseren op basis van inhoud en zo min mogelijk breekpunten behouden.

laten we het voorbeeld aan het begin bekijken: de weersvoorspelling.De eerste stap is om de voorspelling er goed uitzien op een klein scherm.,

vervolgens de grootte van de browser wijzigen totdat er te veel witruimte is tussen de elementen, en de voorspelling ziet er gewoon niet zo goed uit.De beslissing is enigszins subjectief, maar boven 600px is zeker te breed.

om een breekpunt in te voegen bij 600px, maak twee media queries aan het einde van uw CSS voor het component,een om te gebruiken wanneer de browser 600px en lager is, en een voor wanneer het breder is dan 600px.

ten slotte, refactor de CSS. Voeg in de media query voor een max-width van 600pxde CSS toe die alleen voor kleine schermen is., In de media query voor eenmin-width van 601px voeg CSS toe voor grotere schermen.

kies indien nodig kleine breekpunten #

naast het kiezen van grote breekpunten wanneer de lay-out aanzienlijk verandert, is het ook handig om kleine wijzigingen aan te passen.Tussen belangrijke breekpunten kan het bijvoorbeeld nuttig zijn om de marges of opvulling op een element aan te passen,of de lettergrootte te vergroten om het natuurlijker te laten voelen in de opmaak.

laten we beginnen met het optimaliseren van de lay-out van het kleine scherm.,Laat in dit geval het lettertype een boost geven als de breedte van de viewport groter is dan 360px.Ten tweede,als er genoeg ruimte is, kunnen we de hoge en lage temperaturen scheiden zodat ze op dezelfde lijn zitten in plaats van op elkaar.En laten we ook de Weerpictogrammen wat groter maken.

evenzo is het voor de grote schermen het beste om de maximale breedte van het voorspellingspaneel te beperken, zodat het niet de hele schermbreedte verbruikt.,

optimize text for reading #

Classic readability theory suggests that an ideal column should contain 70 to 80 characters per line(about 8 to 10 words in English).Dus,elke keer dat de breedte van een tekstblok groeit voorbij ongeveer 10 woorden, overwegen het toevoegen van een breekpunt.

laten we een diepere blik werpen op het bovenstaande blog post voorbeeld.Op kleinere schermen werkt het Roboto-lettertype op 1em perfect met 10 woorden per regel,maar grotere schermen vereisen een breakpoint.In in dit geval, als de browserbreedte groter is dan 575px, is de ideale inhoudsbreedte 550px.,

vermijd simpelweg het verbergen van inhoud #

wees voorzichtig bij het kiezen welke inhoud te verbergen of te tonen afhankelijk van de schermgrootte.Don ’t gewoon verbergen inhoud alleen maar omdat je’ t passen op het scherm.Schermgrootte is geen definitieve indicatie van wat een gebruiker zou willen.Bijvoorbeeld, het elimineren van de pollen telling uit de weersvoorspelling zou een ernstig probleem voor de lente-time allergiepatiënten die de informatie nodig hebben om te bepalen of ze naar buiten kunnen gaan of niet.,

Media query-breekpunten weergeven in Chrome DevTools #

zodra u uw media query-breekpunten hebt ingesteld, wilt u zien hoe uw site er mee uitziet.U kunt het formaat van uw browservenster wijzigen om de breekpunten te activeren, maar Chrome DevTools heeft een ingebouwde functie die het gemakkelijk maakt om te zien hoe een pagina onder verschillende breekpunten kijkt.

om uw pagina onder verschillende breekpunten te bekijken:

Open DevToolsand schakel apparaatmodus in.Dit wordt standaard geopend in responsieve modus.

om uw media queries te zien, opent u het menu apparaatmodus en selecteert u media queries tonen om uw breekpunten als gekleurde balken boven uw pagina weer te geven.

klik op een van de balken om uw pagina te bekijken terwijl die media query actief is.,Klik met de rechtermuisknop op een balk om naar de definitie van de media query te springen.

verbeteren

---