Jednotky zobrazované oblasti vs procenta. Jednotky měření

Zdravím vás, milí čtenáři blogu webcodius! Pro nastavení velikostí různých prvků html stránky existují v CSS měrné jednotky. Navíc lze použít relativní i absolutní jednotky.

Absolutní jednotky připojený k fyzickému světu a nezávislý na výstupním zařízení. K jejich označení lze použít následující jednotky:

Absolutní jednotky se používají méně často než relativní jednotky a používají se hlavně k nastavení velikosti textu. A k označení velikosti textu používají především bod (pt), který získáme rozdělením jednoho palce na 72 částí. Palec se zase rovná přibližně 25,4 milimetrům, respektive jeden bod se rovná přibližně jedné třetině milimetru. Příklad použití absolutních jednotek měření:

Velikost 12 milimetrů

Velikost 1 centimetr

Velikost 1 palec

Velikost 24 bodů

Špička velikosti 1

Relativní jednotky měření

Pro zobrazení informací na monitoru je lepší používat relativní jednotky měření. Protože fyzická velikost bodů (pixelů), které tvoří obrazy na monitoru, se může lišit v závislosti na typu a fyzické velikosti samotného monitoru. Velikost pixelů také závisí na nastaveném rozlišení obrazovky. Základní relativní jednotky:

1 px v CSS, jak jsme řekli výše, je bod na obrazovce uživatele, jehož fyzická velikost závisí na rozlišení zařízení a na vzdálenosti, ze které se osoba dívá na jeho povrch.
Při zadávání procent se velikost vypočítá na základě velikosti nadřazeného prvku. Pokud je tedy například šířka nadřazeného prvku 500 pixelů, pak pokud zadáte width:50 %, bude šířka prvku 250 pixelů.

em je vázána na výchozí velikost písma prohlížeče nebo velikost písma nadřazeného prvku. A např toto je výška velkého (malého) písmene „x“ (x) v rozložení latinky. To znamená, že em je také svázán s výchozí velikostí písma prohlížeče nebo velikostí písma nadřazeného prvku. Příklady:

Velikost 20 pixelů

Velikost 150 %

Velikost 2 em

Velikost 2 ex

Výsledek:

Kromě výše uvedeného existuje skupina relativních jednotek vázaných na velikost výřezu prohlížeče:

Příklady použití:

Velikost 2 vw

Velikost 2vh

Velikost 2 vmin

Velikost 2 vmax

funkce calc().

Používá se k určení vypočítané hodnoty pro vlastnosti CSS, které jako svou hodnotu používají číslo. Za prvé, calc lze použít k výpočtu rozměrů, úhlů a času. Funkce navíc umožňuje kombinovat různé měrné jednotky, například šířku div lze nastavit takto:

div(
šířka: calc (100% - 40px);
}

V tomto případě bude šířka prvku div rovna šířce nadřazeného prvku mínus 40 pixelů.

Ve výrazech můžete použít následující aritmetické operace:

• + - sčítání. Znak je na obou stranách oddělen mezerami (výška: calc (20% + 50px));
• — — odčítání. Znak je na obou stranách oddělen mezerami (šířka: calc (90% - 10px););
• * — násobení (vycpávka: calc (2em*2););
• / - rozdělení. Dělení nulou je zakázáno (šířka: calc (100%/4);).

Prohlížeče Firefox do verze 16.0 podporují -moz-calc, Chrome do verze 26.0 a Safari od verze 6.0 podporují -webkit-calc.

Například u flexibilního rozvržení webu se dvěma sloupci musíme zajistit, aby při jakékoli velikosti okna prohlížeče byla mezi sloupci vzdálenost 50 pixelů. Pak s pomocí calc funkce to se dělá následovně:

CSS používá k velikosti různých prvků absolutní a relativní jednotky. Absolutní jednotky jsou nezávislé na výstupním zařízení, ale relativní jednotky definují velikost prvku vzhledem k hodnotě jiné velikosti.

Relativní jednotky

Pro práci s textem se obvykle používají relativní jednotky. V tabulce 1 uvádí hlavní relativní jednotky.

Jednotka em je měnitelná hodnota, která závisí na velikosti písma aktuálního prvku (velikost se nastavuje pomocí vlastnosti stylu font-size). Každý prohlížeč má vestavěnou velikost textu, která se použije, pokud tato velikost není výslovně určena. Proto se zpočátku 1 em rovná výchozí velikosti písma prohlížeče nebo velikosti písma nadřazeného prvku. Procentuální zápis je identický s em v tom, že hodnoty 1em a 100% jsou stejné.

Jednotka ex je definována jako výška malého znaku "x". ex podléhá stejným pravidlům jako em , totiž že je vázán na výchozí velikost písma prohlížeče nebo na velikost písma jeho nadřazeného prvku.

Jednotka ch se rovná šířce znaku "0" pro aktuální prvek a stejně jako em závisí na velikosti písma.

Rozdíl mezi em a rem je následující. em závisí na velikosti písma nadřazeného prvku a mění se s ní a rem je vázán na kořenový prvek, tj. velikost písma určená pro prvek html.

Existuje také skupina relativních jednotek vázaných na velikost výřezu prohlížeče. V tabulce 2 ukazuje jejich seznam s popisem.

Absolutní jednotky

Absolutní jednotky představují fyzické rozměry – palce, centimetry, milimetry, body, picas a pixely. U zařízení s nízkým dpi (počet pixelů na palec určuje hustotu pixelů) je vazba na pixel. V tomto případě se jeden palec rovná 96 pixelům. Je zřejmé, že skutečný palec nebude odpovídat palci na takovém zařízení. Na zařízeních s vysokým DPI je skutečný palec stejný jako palec na obrazovce, takže velikost pixelu se vypočítá jako 1/96 palce. V tabulce 3 uvádí základní absolutní jednotky.

Příklad

30px záhlaví

Velikost textu 1,5 em

24bodový nadpis

Posunout text doprava o 30 milimetrů

Poznámka

Při nastavování rozměrů nezapomeňte zadat měrné jednotky, například šířka: 30px. V opačném případě nebude prohlížeč schopen zobrazit požadovaný výsledek, protože nerozumí, jakou velikost požadujete. Jednotky se nesčítají pouze tehdy, když je hodnota nula (margin: 0).

Internet Explorer podporuje jednotku vm namísto vmin .

Specifikace

Každá specifikace prochází několika fázemi schvalování.

• Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
• Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
• Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
• Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
• Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
• Koncept ( Návrh specifikace) - první verze návrhu normy.

×

Zmínil jsem nové (relativně) měrné jednotky. Tyto jednotky jsou vw, vh, vmin a vmax a jsou založeny na velikosti zobrazované oblasti prohlížeče. Jejich skutečná velikost se mění se změnou výřezu prohlížeče, díky čemuž jsou tyto jednotky ideální pro responzivní design. Ačkoli jsem ve svém předchozím příspěvku argumentoval proti používání těchto jednotek k určení velikostí písma, mohou být velmi užitečné pro práci s prvky rozvržení.

Výhledové jednotky

Jednotky výřezu jsou relativní jednotky, což znamená, že je nelze objektivně měřit. Jejich velikost je určena velikostí výřezu prohlížeče. S výřezem souvisí čtyři jednotky.

Zaměřím se na první dva, protože jsou nejčastěji používané. V mnoha případech se jednotky výřezu (vh a vw) z hlediska schopností překrývají s procenty. Každý z nich má však své silné a slabé stránky.

Když to shrnu, vypadá to takto:

Při řešení šířky je lepší % a při řešení výšky je lepší vh.

Prvky celé šířky stránky: % > vw

Jak jsem již řekl, vw určuje velikost prvku na základě šířky výřezu. Prohlížeče však vypočítají velikost na základě prostoru pro posuvník.

Pokud šířka stránky přesahuje šířku zobrazované oblasti, zobrazí se posuvník. Ve skutečnosti je však šířka výřezu větší než šířka prvku html

Výřez > html > tělo

Pokud tedy nastavíte šířku prvku na 100vw, prvek bude přesahovat html a tělo. V tomto příkladu jsem vytvořil červený okraj kolem prvku html a vyplnil sekce různými barvami.

Kvůli této nuanci je lepší vytvářet prvky přes celou šířku stránky pomocí procent, než se spoléhat na šířku výřezu.

Prvky celé výšky stránky: vh > %

Při vytváření prvků, které musí mít stejnou výšku jako stránka, je mnohem lepší použít místo procent vh. Protože velikost prvku, definovaná v procentech, je relativní k jeho rodičovskému prvku, můžeme získat prvek s výškou rovnou výšce obrazovky pouze v případě, že jeho nadřazený prvek také zabírá celou výšku obrazovky. To znamená, že musíme umístit prvek jako pevný, aby se prvek html stal rodičem, nebo se uchýlit k použití nějakého hacku.

Použití vh k dosažení tohoto efektu je poměrně jednoduché:

Příklad ( výška: 100vh; )

Bez ohledu na to, jak je prvek .example vnořen, lze jeho rozměry nastavit relativně k rozměrům výřezu. Problém posouvání nás nebude obtěžovat, protože většina webů nemá vodorovný posuvník

Zde je několik příkladů použití jednotek vh.

Obrázky na pozadí celé obrazovky

Typickým použitím jednotky vh je vytvoření obrázku na pozadí, který zabírá celou výšku a šířku obrazovky, bez ohledu na velikost zařízení. To je docela snadné.

Bg ( pozice: relativní; pozadí: url("bg.jpg") střed/obálka; šířka: 100 %; výška: 100vh; )

Podobným způsobem můžeme vytvořit efekt „stránky“ tím, že každé sekci přidělíme rozměry výřezu.

Sekce ( šířka: 100 %; výška: 100vh; )

K vytvoření iluze otáčení stránek můžeme použít JavaScript.

$("nav").on("click", function() ( if ($(this).hasClass("dolů")) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, tělo"). animate(( scrollTop: movePos ), 1000 ))

Skládací obrázek

Vh lze také použít k ovládání velikosti obrázku na stránce. Například v rámci článku. Chceme zajistit, aby se jakýkoli obrázek zobrazil celý bez ohledu na velikost obrazovky.

Budeme potřebovat následující kód

Img ( šířka: auto; /* Automatická šířka bude úměrná výšce */ max-width: 100 %; /* Ne větší než šířka nadřazeného prvku */ max-height: 90vh; /* Ne větší než výška výřezu */ okraj: 2rem auto;

Podpora prohlížeče

Protože jsou tyto jednotky relativně nové, stále existují problémy s určitými prohlížeči.

Zde je návod, jak je vyřešit.

V CSS existuje několik základních jednotek měření: relativní a absolutní. Při práci s CSS musíte jasně rozumět jejich použití, jinak bude práce s kaskádovými styly složitá a nesrozumitelná. Absolutní jednotky měření se dělí na 5 typů, relativní na 4. Měli byste vědět, že Absolutní jednotky měření nezávisí na výstupním zařízení, tzn. monitory a obrazovky, zatímco relativní určují velikost prvku vzhledem k jiné velikosti, tzn. monitor, obrazovka, rodičovský prvek atd. Nyní o nich více.

Relativní jednotky měření.

Relativní jednotky měření se obvykle používají pro práci s textem a v „rozbalitelných“ rozvrženích. V následující tabulce jsou uvedeny základní relativní jednotky měření.

E.M.

Naměřená hodnota závisí na velikosti písma aktuálního prvku (nastavuje se přes atribut font-size). Pokud není explicitně nastavena, použije se velikost textu nastavená v prohlížeči. Proto se 1 em zpočátku rovná výchozí velikosti písma v prohlížeči.

EX

Tento argument je definován jako výška malého znaku "x". Ex je vázán na výchozí velikost písma nastavenou v prohlížeči, pokud má nadřazený prvek nastaven atribut „font-size“, pak je s ním svázán.

PX

Pixel je 1 bod rozlišení výstupního zařízení (monitor nebo obrazovka). Tito. Pokud je rozlišení vašeho monitoru 1024*768, máte 1024 pixelů horizontálně a 768 pixelů vertikálně. Tito. Velikost pixelu přímo závisí na rozlišení výstupního zařízení a jeho technických vlastnostech.

%

Procentuální jednotka závisí na rozměrech nadřazeného prvku.

Absolutní jednotky měření.

Absolutní jednotky měření se používají méně často a většinou při práci s textem. Následující tabulky ukazují absolutní jednotky měření.

Z těchto jednotek by měl být popsán pouze pt (bod), protože pc je odvozenina od pt a použití in, cm a mm není třeba popisovat.

Jde o nejběžnější a nejrozšířenější měrnou jednotku pro písma (pamatujete, jak nastavují velikost písma ve Wordu nebo Open Office?).

K nastavení velikostí různých prvků používá CSS absolutní a relativní jednotky měření. Absolutní jednotky jsou nezávislé na výstupním zařízení, ale relativní jednotky definují velikost prvku vzhledem k hodnotě jiné velikosti.

Relativní jednotky

Relativní jednotky se obvykle používají při práci s textem nebo když potřebujete vypočítat procentuální vztah mezi prvky. V tabulce 1 uvádí hlavní relativní jednotky.

Proměnná hodnota, která závisí na velikosti písma aktuálního prvku (nastavuje se pomocí vlastnosti stylu font-size). Každý prohlížeč má vestavěnou velikost textu, která se používá, pokud tato velikost není výslovně určena. Proto se zpočátku 1 em rovná výchozí velikosti písma nastavené v prohlížeči. Podle toho při nastavování velikosti textu pro celou stránku v em pracujeme s tímto parametrem. Když je em použito pro určitý prvek, 1em je velikost písma jeho rodiče.

ex je definováno jako výška malého znaku "x". ex podléhá stejným pravidlům jako em , totiž že je vázán na výchozí velikost písma prohlížeče nebo na velikost písma jeho nadřazeného prvku.

Pixel je elementární bod zobrazený monitorem nebo jiným podobným zařízením, jako je smartphone. Velikost pixelu závisí na rozlišení zařízení a jeho technických vlastnostech.

Příklad 1 ukazuje použití těchto jednotek.

Příklad 1: Použití relativních jednotek

Velikost 2 em

Velikost 2 ex

Velikost 30 pixelů

Velikost 200 %

Výsledek tohoto příkladu je uveden níže (obrázek 1).

Rýže. 1. Velikost textu s různými jednotkami

Absolutní jednotky

Absolutní jednotky se používají méně často než relativní a zpravidla při práci s textem. V tabulce 2 uvádí hlavní takové jednotky.

Snad nejběžnější jednotkou je bod, který se používá k označení velikosti písma. Mnoho lidí je zvyklých nastavit velikost písma v textových editorech, například 12. Ale nechápou, co toto číslo znamená. Tak to jsou přesně ty body, jsou nativní. U nás samozřejmě nejsou původní, jsme zvyklí měřit vše v milimetrech a podobných jednotkách, ale bod je snad jediná hodnota z nemetrického měřicího systému, který se u nás všude používá.

A to vše díky textovým editorům a publikačním systémům. Příklad 2 ukazuje použití bodů a dalších jednotek.

Příklad 2: Použití absolutních jednotek

Velikost 0,5 palce

Velikost 24 bodů

Velikost 8 mm

Výsledek použití absolutních jednotek měření je uveden níže (obr. 2).