CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

Responsiewe webontwerp - Die uitsigpoort


Wat is The Viewport?

Die viewport is die gebruiker se sigbare area van 'n webblad.

Die kykpoort verskil met die toestel en sal kleiner wees op 'n selfoon as op 'n rekenaarskerm.

Voor tablette en selfone was webblaaie slegs vir rekenaarskerms ontwerp, en dit was algemeen dat webblaaie 'n statiese ontwerp en 'n vaste grootte gehad het.

Toe ons op die internet begin rondsnuffel het met tablette en selfone, was webbladsye met vaste grootte te groot om by die uitsigpoort te pas. Om dit reg te stel, het blaaiers op daardie toestelle die hele webblad afgeskaal om by die skerm te pas.

Hierdie was nie perfek nie!! Maar 'n vinnige oplossing.


Stel die uitsigpoort

HTML5 het 'n metode bekendgestel om webontwerpers deur die <meta>merker beheer oor die viewport te laat neem.

Jy moet die volgende <meta>viewport-element by al jou webblaaie insluit:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dit gee die blaaier instruksies oor hoe om die bladsy se afmetings en skaal te beheer.

Die width=device-widthdeel stel die breedte van die bladsy in om die skermwydte van die toestel te volg (wat sal wissel na gelang van die toestel).

Die initial-scale=1.0deel stel die aanvanklike zoomvlak in wanneer die bladsy die eerste keer deur die blaaier gelaai word.

Hier is 'n voorbeeld van 'n webbladsy sonder die viewport-metamerker, en dieselfde webbladsy met die viewport-metamerker:


Wenk: As jy deur hierdie bladsy met 'n foon of 'n tablet blaai, kan jy op die twee skakels hierbo klik om die verskil te sien.


Grootte inhoud na die uitsigpoort

Gebruikers word gebruik om webwerwe vertikaal op beide rekenaar- en mobiele toestelle te blaai - maar nie horisontaal nie!

Dus, as die gebruiker gedwing word om horisontaal te blaai, of uit te zoem, om die hele webblad te sien, lei dit tot 'n swak gebruikerservaring.

Enkele bykomende reëls om te volg:

1. MOENIE groot vaste breedte elemente gebruik nie - Byvoorbeeld, as 'n prent vertoon word op 'n wydte wyer as die uitsigpoort kan dit veroorsaak dat die uitsigvenster horisontaal blaai. Onthou om hierdie inhoud aan te pas om binne die breedte van die kykpoort te pas.

2. MOENIE toelaat dat die inhoud op 'n spesifieke uitsigpoort-wydte staatmaak om goed weer te gee nie - Aangesien skermafmetings en -breedte in CSS-pieksels baie verskil tussen toestelle, moet inhoud nie op 'n spesifieke uitsigpoort-wydte staatmaak om goed weer te gee nie.

3. Gebruik CSS-media-navrae om verskillende stilering toe te pas vir klein en groot skerms - Deur groot absolute CSS-wydtes vir bladsy-elemente in te stel, sal die element te wyd wees vir die kykpoort op 'n kleiner toestel. Oorweeg eerder om relatiewe breedtewaardes te gebruik, soos breedte: 100%. Wees ook versigtig om groot absolute posisioneringswaardes te gebruik. Dit kan veroorsaak dat die element buite die uitsigpoort op klein toestelle val.