Ik noemde nieuwe (relatief) meeteenheden. Deze eenheden zijn vw, vh, vmin en vmax, en zijn gebaseerd op de browserviewportgrootte. Hun werkelijke grootte verandert naarmate de browserviewport verandert, waardoor deze eenheden ideaal zijn voor adaptief ontwerp. Hoewel ik in mijn vorige bericht heb gepleit tegen het gebruik van deze eenheden om lettergroottes te specificeren, kunnen ze erg handig zijn bij het werken met lay-outelementen.
Viewport-eenheden
Viewport-eenheden zijn relatieve eenheden, wat betekent dat ze niet objectief kunnen worden gemeten. Hun grootte wordt bepaald door de grootte van de browserviewport. Er zijn vier eenheden gerelateerd aan de viewport.
Ik zal me concentreren op de eerste twee, omdat deze het meest worden gebruikt. In veel gevallen overlappen viewport-eenheden (vh en vw) met percentages in termen van mogelijkheden. Elk van hen heeft echter zijn eigen sterke en zwakke punten.
Samenvattend ziet het er als volgt uit:
Als het om de breedte gaat, is % beter, en als het om de hoogte gaat, is vh beter.
Elementen met volledige paginabreedte: % > vw
Zoals ik al zei, bepaalt vw de grootte van het element op basis van de breedte van de viewport. Browsers berekenen de grootte echter op basis van de ruimte voor de schuifbalk.
Als de paginabreedte groter is dan de breedte van de viewport, verschijnt er een schuifbalk. In werkelijkheid is de breedte van de viewport echter groter dan de breedte van het html-element
Viewport > html > hoofdtekst
Dus als u de breedte van het element instelt op 100vw, zal het element verder reiken dan de html en de body. V in dit voorbeeld Ik heb een rode rand rond het html-element gemaakt en de secties met verschillende kleuren gevuld.
Vanwege deze nuance is het beter om elementen over de gehele breedte van de pagina te maken met behulp van percentages, in plaats van te vertrouwen op de breedte van de viewport.
Elementen voor volledige paginahoogte: vh > %
Bij het maken van elementen die dezelfde hoogte moeten hebben als de pagina, is het veel beter om vh te gebruiken in plaats van percentages. Omdat de procentuele grootte van een element relatief is ten opzichte van het bovenliggende element, kunnen we de hoogte van het element bepalen gelijke hoogte scherm alleen als het bovenliggende element ook de volledige hoogte van het scherm beslaat. Dit betekent dat we het element als vast moeten positioneren om het html-element ouder te maken, of dat we een hack moeten gebruiken.
Het gebruik van vh om dit effect te bereiken is vrij eenvoudig:
Voorbeeld ( hoogte: 100vh; )
Ongeacht hoe het .example-element is genest, kunnen de afmetingen ervan worden ingesteld ten opzichte van de afmetingen van de viewport. Het scrollprobleem zal ons niet storen, aangezien de meeste sites geen horizontale schuifbalk hebben
Hier zijn enkele voorbeelden van hoe vh-eenheden kunnen worden gebruikt.
Achtergrondafbeeldingen op volledig scherm
Een typisch gebruik van de vh-eenheid is het creëren van een achtergrondafbeelding die de gehele hoogte en breedte van het scherm beslaat, ongeacht de apparaatgrootte. Dit is vrij eenvoudig te doen.
Bg ( positie: relatief; achtergrond: url("bg.jpg") midden/omslag; breedte: 100%; hoogte: 100vh; )
Op een vergelijkbare manier kunnen we een “pagina’s”-effect creëren door elke sectie de afmetingen van de viewport te geven.
Sectie (breedte: 100%; hoogte: 100vh; )
We kunnen JavaScript gebruiken om de illusie te creëren dat pagina's worden omgeslagen.
$("nav").on("klik", function() ( if ($(this).hasClass("down")) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). animeren(( scrollTop: movePos ), 1000 ))
Opvouwbare afbeelding
Vh kan ook worden gebruikt om de grootte van een afbeelding binnen een pagina te regelen. Bijvoorbeeld in het kader van een artikel. We willen ervoor zorgen dat elke afbeelding in zijn geheel wordt weergegeven, ongeacht de schermgrootte.
We hebben de volgende code nodig
Img ( breedte: auto; /* Automatische breedte die proportioneel is aan de hoogte */ max-width: 100%; /* Niet meer breedte bovenliggend element */ max. hoogte: 90vh; /* Zonder de hoogte van de viewport te overschrijden */ marge: 2rem auto; )
Browser-ondersteuning
Omdat deze units relatief nieuw zijn, zijn er nog steeds problemen met bepaalde browsers.
Hier leest u hoe u ze kunt oplossen.
Om afmetingen in te stellen verschillende elementen CSS gebruikt absolute en relatieve eenheden metingen. Absolute eenheden zijn onafhankelijk van het uitvoerapparaat, maar relatieve eenheden definiëren de grootte van een element ten opzichte van de waarde van een andere grootte.
Relatieve eenheden
Relatieve eenheden worden meestal gebruikt om met tekst te werken. In tabel 1 geeft een overzicht van de belangrijkste relatieve eenheden.
De em-eenheid is veranderlijke waarde, die afhangt van de lettergrootte van het huidige element (de grootte wordt ingesteld via de eigenschap font-size style). Elke browser heeft een ingebouwde tekstgrootte die wordt gebruikt als deze grootte niet expliciet is opgegeven. Daarom is 1em aanvankelijk gelijk aan de standaardlettergrootte van de browser of de lettergrootte van het bovenliggende element. De percentagenotatie is identiek aan em , in die zin dat de waarden van 1em en 100% gelijk zijn.
De eenheid ex wordt gedefinieerd als de hoogte van het teken "x" in kleine letters. ex is onderworpen aan dezelfde regels als em , namelijk dat het gebonden is aan de standaardlettergrootte van de browser of aan de lettergrootte van het bovenliggende element.
De ch-eenheid is gelijk aan de breedte van het teken "0" voor het huidige element en is, net als em, afhankelijk van de lettergrootte.
Het verschil tussen em en rem is als volgt. em hangt af van de lettergrootte van het ouderelement en verandert daarmee, en rem is gekoppeld aan het hoofdelement, d.w.z. de lettergrootte die is opgegeven voor het html-element.
Er is ook een groep relatieve eenheden die verband houden met de grootte van de browserviewport. In tabel 2 toont een lijst ervan met een beschrijving.
Absolute eenheden
Absolute eenheden vertegenwoordigen fysieke afmetingen- inches, centimeters, millimeters, punten, pica's en pixels. Voor apparaten met een lage dpi (het aantal pixels per inch bepaalt de pixeldichtheid) geldt de binding per pixel. In dit geval is één inch gelijk aan 96 pixels. Het is duidelijk dat de echte inch niet overeenkomt met de inch op een dergelijk apparaat. Op apparaten met een hoge DPI is de werkelijke inch hetzelfde als de inch op het scherm, dus de pixelgrootte wordt berekend als 1/96 inch. In tabel 3 geeft een overzicht van de absolute basiseenheden.
Voorbeeld
30px koptekst
Tekstgrootte 1,5 em
24 punten kop
Verschuif tekst 30 millimeter naar rechts
Opmerking
Zorg er bij het instellen van de afmetingen voor dat u de maateenheden opgeeft, bijvoorbeeld breedte: 30px. Anders kan de browser niet het gewenste resultaat weergeven, omdat hij niet begrijpt welk formaat u nodig heeft. Eenheden worden niet alleen toegevoegd wanneer nul waarde(marge: 0).
Internet Explorer ondersteunt vm-eenheid in plaats van vmin.
Specificatie
Elke specificatie doorloopt verschillende goedkeuringsfasen.
- Aanbeveling - De specificatie is goedgekeurd door het W3C en wordt aanbevolen als standaard.
- Aanbeveling van kandidaten ( Mogelijke aanbeveling ) - de groep die verantwoordelijk is voor de standaard is ervan overtuigd dat deze aan de doelstellingen voldoet, maar heeft hulp nodig van de ontwikkelingsgemeenschap om de standaard te implementeren.
- Voorgestelde aanbeveling Voorgestelde aanbeveling) - in dit stadium wordt het document ter definitieve goedkeuring voorgelegd aan de W3C Adviesraad.
- Werkconcept - Een meer volwassen versie van een concept dat is besproken en aangepast voor beoordeling door de gemeenschap.
- Redactievoorstel ( Redactie ontwerp) - een conceptversie van de standaard nadat wijzigingen zijn aangebracht door de projectredacteuren.
- Voorlopige versie ( Conceptspecificatie) - de eerste conceptversie van de standaard.
Er zijn nieuwe relatieve eenheden toegevoegd aan CSS3, zoals vh, vw, vmin, vmax. Deze eenheden worden berekend in verhouding tot de grootte van het browservenster. Voor desktopcomputers De breedte van het browservenster is groter dan de breedte van de viewport (de breedte van de schuifbalk wordt toegevoegd), dus als u de breedte van het element instelt op 100vw, gaat deze verder dan de html.
Rijst. 1. Achtergrondafbeelding op volledig scherm met een breedte van 100vw Browser-ondersteuning
D.W.Z: 9.0 behalve vmax, gebruik vm in plaats van vmin
Rand: 12.0 behalve vmax, gebruik vm in plaats van vmin
Firefox: 19.0
Chroom: 26.0
Opera: 15.0
Safari: 6.1
iOS-Safari: 8.0
Android: 4.4
Chroom voor Android: 55.0
1. Eenheden vh en vw
Technieken responsief webdesign zijn gebaseerd op het gebruik van percentagewaarden. Maar de belangstelling is verre van beste oplossing voor elk geval, omdat ze worden berekend ten opzichte van de afmetingen van het dichtstbijzijnde ouderelement. Als u de hoogte en breedte van het browservenster wilt gebruiken, is het daarom beter om vh- en vw-eenheden te gebruiken. Als de hoogte van het browservenster bijvoorbeeld 900 px is, is 1vh 9 px. Op dezelfde manier, als de breedte van het browservenster 1600 px is, is 1vw 16 px.
1.1. Responsieve achtergrondafbeelding op volledig scherm
Omdat de breedte van het met 100vw gespecificeerde element groter is dan de breedte van de viewport, kunt u voor het creëren van een volledig scherm achtergrondafbeeldingen Het is beter om een breedte van 100% te gebruiken, wat gelijk is aan de breedte van het root-html-element.
Volledig scherm-bg (achtergrond: url(image.jpg); achtergrondpositie: midden; achtergrondgrootte: omslag; breedte: 100%; hoogte: 100vh; ) 
Rijst. 2. Responsieve achtergrondafbeelding op volledig scherm
1.2. Dia-effect op volledige pagina
Om een blok de gehele hoogte van het browservenster te maken, moet u de hoogte instellen: 100%; voor drie elementen - html, body en rechtstreeks voor het blok zelf:
Html, body ( hoogte: 100%; ) sectie ( hoogte: 100%; )
Omdat procentuele maten worden berekend ten opzichte van de waarden ouderelementen, dan moet u voor elk de juiste waarden instellen DOM-element. De maateenheid vh vereist geen kettingwaarden, omdat de waarde ervan rechtstreeks ten opzichte van het browservenster wordt berekend:
Sectie (hoogte: 100vh; )
Het effect van het bladeren door de dia's wanneer u op de pijl klikt, wordt geïmplementeerd met behulp van een klein jQuery-script:
JQuery(document).ready(function($) ( $("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window ).scrollTop() + $(window).height( ) if ($(this).hasClass("top")) ( var movePos = $(window).scrollTop() - $(window).height( ) $("html, body").animate((scrollTop: movePos), 600 ));
De met vh opgegeven hoogte kan ook worden gebruikt om een element op de pagina te centreren.
CSS3 heeft nieuwe meeteenheden. (Volgens mij heb ik hier al over gesproken. nl) Je hebt al gehoord over px, pt, em en de nieuwe rem. Laten we er nog een paar bekijken: vw en vh.
Vaak zijn er elementen in een lay-out die gegarandeerd in de browserviewport passen. Over het algemeen wordt hiervoor JavaScript gebruikt. Laten we de grootte van de viewport controleren en de grootte van de elementen dienovereenkomstig aanpassen. Als de gebruiker het browservenster vergroot of verkleint, wordt de procedure herhaald.
Met behulp van vw/vh kunnen we de grootte van elementen instellen in verhouding tot de grootte van de viewport. De vw/vh-eenheden zijn interessant omdat 1vw een eenheid is die gelijk is aan 1/100ste van de viewportbreedte. Om bijvoorbeeld een element een breedte toe te kennen die gelijk is aan de viewportbreedte, moet u breedte:100vw instellen.
Hoe het kan worden gebruikt
Lightboxen zijn een goede kandidaat voor het gebruik van vw en vh, omdat ze meestal relatief ten opzichte van de viewport zijn gepositioneerd, maar ik vind dat position:fixed met waarden voor boven, onder, links en rechts gemakkelijker te gebruiken is, omdat je ze niet hoeft in te stellen de hoogte en breedte helemaal niet.U kunt de nieuwe eenheden gebruiken om de grootte in te stellen van elementen die zich in de normale stroom bevinden. Ik kan bijvoorbeeld screenshots op de pagina plaatsen. De hoogte van deze schermafbeeldingen mag de hoogte van de viewport niet overschrijden. Om dit te doen kan ik de maximale hoogte van de afbeeldingen instellen:
Afb (max. hoogte:95vh; )
IN in dit geval Ik heb de hoogte ingesteld op 95vh om wat ruimte rond te laten als ze op het scherm staan.
