Paglalaro ng Mga Yunit ng CSS mahalagang papel sa paggawa at pagpapalaki ng website iba't ibang elemento. Mga halaga ng CSS ay maaaring ipahayag bilang positibo o negatibong mga numero, bagama't ang ilang mga katangian ay tumatagal lamang mga positibong numero. Numeric na halaga sinamahan ng dalawang-titik na pagdadaglat na kumakatawan sa aktwal na yunit ng haba. Halimbawa, cm (sentimetro), px (pixel) o em CSS. Ang pagbubukod sa panuntunang ito ay ang halagang 0 (zero), na hindi nangangailangan ng yunit ng pagsukat.

Ang mga yunit ng CSS ay may dalawang uri: absolute at relative.

Mga yunit ng ganap na haba sa CSS

Ang mga ganap na CSS unit ay hindi angkop para sa disenyo ng web. Kinakatawan ng mga ito ang mga digital na representasyon ng mga resulta ng pagsukat sa pisikal na mundo at hindi nakasalalay sa laki at resolution ng screen. Ang mga ganap na haba na may parehong halaga ay maaaring mag-iba ayon sa iba't ibang mga screen. Ito ay sanhi ng mga pagkakaiba sa screen DPI (dots per inch).

Ang mga high resolution na screen ay may higit pa mataas na rate DPI kumpara sa mas mababang resolution ng mga screen, na ginagawang mas maliit ang mga larawan at text. Ginagamit ang mga absolute unit para tukuyin ang mga istilo sa pag-print, kung saan nagaganap ang mga sukat sa pulgada, puntos at pica.

Ganap na mga yunit ng haba:

• cm (sentimetro);
• mm (milimetro);
• sa (pulgada);
• pc(mga taluktok);
• pt(puntos);
• px (mga pixel).

Karamihan sa mga ganap na yunit ng haba ay walang silbi sa Internet. Ang tanging exception ay px. Ang mga pixel ay mga relatibong unit na nauugnay sa resolution ng mga screen. Para sa mga printer at monitor na may napaka mataas na resolution ang isang pixel sa CSS ay katumbas ng ilang pixel sa screen, kaya ang bilang ng px bawat pulgada ay nasa 96. Ang pixel ay ang pinakamaliit na yunit ng pagsukat at karaniwang ginagamit bilang reference para sa iba.

Mga yunit ng kaugnay na haba sa CSS

Mga kamag-anak na yunit Ang mga dimensyon ng haba sa CSS ay walang mga nakapirming halaga. Ang kanilang mga kahulugan ay nakasalalay sa iba itakda ang mga halaga o mga function. Mas sikat ang mga ito sa disenyo ng web dahil mas pinadali nila ang pagtukoy sa laki ng isang elemento. Sa kanilang tulong, maaari mong itakda ang lapad, taas, laki ng font, atbp. na may kaugnayan sa iba pang mga pangunahing parameter.

Mga kamag-anak na unit depende sa font

Ang mga kamag-anak na unit na umaasa sa font ay isinangguni nang maaga itakda ang laki font o font-family property value:

• ex(taas ng character x);
• ch( lapad ng character zero (0));
• em unit sa CSS (kasalukuyang taas ng font ng elemento);
• rem( laki ng font ng elemento ng ugat).

ex

Tinukoy bilang " taas ng character x ng kasalukuyang font O kalahating 1 em" Ibig sabihin, ang taas maliit na titik x naka-install na font. Kapag binago mo ang halaga ng font-family property, magbabago ang ex unit.

ch

Katumbas ng lapad ng character 0 . Nagbabago rin ang unit ng panukalang ito kapag nagbago ang halaga ng font-family property.

em

Ang CSS em unit ay may halaga na katumbas ng laki ng font ng pangunahing o elemento ng magulang. Halimbawa, kung ang laki ng font ng isang parent na elemento ay 30px, ang isang value na 1em ay kakalkulahin bilang 30px (30 x 1) para sa lahat ng child element. Ang numero ay hindi kailangang isang integer. Kung sa halimbawa ay papalitan natin ang 1em ng 0.5, ang halaga ay magiging 15px (30 x 0.5).

Kinukuha ng em unit ang halaga ng parent tag. Maaari itong humantong sa mga hindi kanais-nais na resulta kapag gumagamit ng mga nested na elemento.

Sabihin nating mayroon tayong tatlong nested na elemento. Ang unang elemento (root) ay may laki ng font na 30px, at ang dalawang nested na elemento ay may laki ng font na 2em. Ang elementong naka-nest sa loob ng ugat ay magkakaroon ng laki ng font na kinakalkula bilang 60px (30 x 2 ). At ang elementong naka-nest sa loob nito ay magkakaroon ng laki ng font na kinakalkula bilang 120px (60 x 2).

rem

Ang rem ay katulad ng CSS em , ngunit ang halaga nito ay palaging nananatiling katumbas ng laki ng font ng elemento ng ugat. Ang rem unit ay kapaki-pakinabang kapag bumubuo ng mga tumutugon na website dahil pinapayagan ka nitong sukatin ang buong page sa pamamagitan ng pagbabago ng laki ng font sa HTML element.

Mga unit ng porsyento ng haba batay sa laki ng viewport

Ang lugar ng pagtingin ay batay sa lapad at taas ng viewport at kasama ang:

• vh( taas ng viewport);
• vw( lapad ng viewport);
• vmin( pinakamaliit sa (vw, vh));
• vmax ( pinakamalaki sa (vw, vh)).

vw

Ito ang lapad ng viewport. Ang 1vw ay katumbas ng 1/100 ng lapad ng viewport. Medyo katulad ng mga porsyento, maliban na ang halaga ay nananatiling pareho para sa lahat ng mga elemento anuman ang lapad ng kanilang mga pangunahing elemento. Halimbawa, kung ang lapad ng window ay 1000px, ang 1vw ay magiging katumbas ng 10px.

vh

Kapareho ng vw ( lapad ng viewport), lamang yunit na ito ang mga sukat ay nakasalalay sa taas ng lugar na tinitingnan. Ang 1vh ay katumbas ng 1/100 ng taas ng panonood. Halimbawa, kung ang taas ng browser window ay 900px, ang 1vh ay magiging 9px.

vmin

Ang Vmin ay katumbas ng 1/100 ng pinakamababang halaga sa pagitan ng taas at lapad ng viewport. Sa madaling salita, 1/100th ng gilid na may pinakamaikling haba. Halimbawa, kung ang mga sukat ng window 1200 by 800 pixels, kung gayon ang halaga ng vmin ay magiging 8px .

vmax

Ang vmax ay katumbas ng 1/100 ng pinakamataas na halaga sa pagitan ng taas at lapad ng viewport. Sa madaling salita, 1/100 ng gilid pinakamahabang haba. Halimbawa, kung ang mga sukat ay 1200 by 800 pixels, at ang vmax ay 12px .

% ng interes

Ang distansya na tinukoy bilang isang porsyento ay depende sa haba ng parent na elemento. Halimbawa, kung ang parent element ay 1000px ang lapad at ang anak nito ay 50% ng value na iyon, ang lapad elemento ng bata magiging 500px .

SUPPORTA SA BROWSER

em CSS, ex, px, cm, mm, in, pt, at pc

ay suportado sa lahat ng browser, kabilang ang mga mas lumang bersyon ng IE.

Ang CSS3 ay may mga bagong yunit ng pagsukat. (Palagay ko napag-usapan ko na ito. eng) Narinig mo na ang tungkol sa px, pt, em at ang bagong rem. Tingnan natin ang ilan pa: vw at vh.

Kadalasan mayroong mga elemento sa isang layout na garantisadong magkasya sa viewport ng browser. Sa pangkalahatan, ginagamit ang JavaScript para dito. Suriin natin ang laki ng viewport at baguhin ang laki ng mga elemento nang naaayon. Kung babaguhin ng user ang window ng browser, uulitin ang pamamaraan.

Gamit ang vw/vh maaari nating itakda ang laki ng mga elemento na nauugnay sa laki ng viewport. Ang mga unit ng vw/vh ay kawili-wili dahil ang 1vw ay isang yunit na katumbas ng 1/100th ng lapad ng viewport.

Paano ito magagamit

Ang mga lightbox ay isang mahusay na kandidato para sa paggamit ng vw at vh dahil ang mga ito ay karaniwang nakaposisyon na may kaugnayan sa viewport, gayunpaman nalaman kong mas madaling gamitin ang position:fixed na may itaas, ibaba, kaliwa at kanang mga halaga dahil hindi mo kailangang magtakda ang taas at lapad sa lahat.

Maaari mong gamitin ang mga bagong unit ng pagsukat upang itakda ang mga laki ng mga elemento na nasa normal na daloy. Halimbawa, maaari akong mag-post ng mga screenshot sa pahina. Ang taas ng mga screenshot na ito ay hindi dapat lumampas sa taas ng viewport. Upang gawin ito maaari kong itakda ang pinakamataas na taas ng mga imahe:

Img ( max-height:95vh; )

SA sa kasong ito Itinakda ko ang taas sa 95vh upang mag-iwan ng kaunting espasyo sa paligid kapag nasa screen sila.

Suporta sa browser

Kung ang rem ay sinusuportahan ng halos lahat ng mga pangunahing browser kabilang ang IE9, kung gayon ang paggamit ng vw at vh ay nagkakahalaga ng pagtigil. Naka-on sa ngayon sumusuporta lamang sa kanila Internet Explorer 9.

Mula sa may-akda: Lumipas ang ilang taon mula noong unang paglitaw ng mga viewport unit sa CSS. Ang mga ito ay tunay na adaptive length unit; Kung narinig mo na ang tungkol sa mga ito ngunit hindi kailanman tumingin sa mga detalye, ang artikulong ito ay para sa iyo.

Mga yunit ng pagsukat at ang kanilang kahulugan

Mayroong 4 na uri ng viewport unit sa CSS: vh, vw, vmin at vmax.

Taas ng viewport (vh) – batay sa taas ng viewport. Ang value na 1vh ay katumbas ng 1% ng taas ng viewport.

Lapad ng viewport (vw) – batay sa lapad ng viewport. Ang value na 1vw ay katumbas ng 1% ng lapad ng viewport.

Viewport minimum (vmin) – batay sa pinakamababang bahagi ng viewport. Kung ang taas ng viewport ay mas mababa sa lapad, ang halaga ng 1vmin ay magiging katumbas ng 1% ng taas. Gayundin, kung ang lapad ay mas mababa sa taas, ang 1vmin ay magiging katumbas ng 1% ng lapad ng viewport.

Viewport maximum (vmax) – batay sa malaking bahagi ng viewport. Kung ang taas ng viewport mas lapad, ang halaga ng 1vmax ay magiging katumbas ng 1% ng taas ng viewport. Kung ang lapad ng viewport ay mas malaki kaysa sa taas, ang 1vmax ay magiging katumbas ng 1% ng lapad.

Tingnan natin kung anong mga halaga ang nakukuha natin sa iba't ibang sitwasyon:

Kung ang viewport ay 1200px ang lapad at 1000px ang taas, ang halaga ng 10vw ay magiging 120px, at ang 10vh ay magiging 100px. Ang lapad ng viewport ay mas malaki kaysa sa taas, kaya ang 10vmax ay magiging katumbas ng 120px, at ang 10vmin ay magiging 100px.

Kung iikot mo ang device upang ang lapad ay maging 1000px at ang taas ay 1200px, ang 10vh ay magiging 120px at ang 10vw ay magiging 100px. Kapansin-pansin, ang 10vmax ay mananatiling 120px, dahil ngayon ang halaga ay tinutukoy ng taas ng viewport. Ang halaga ng 10vmin ay mananatiling 100px.

Kung paliitin mo ang window ng browser sa 1000px ang lapad at 800px ang taas, ang 10vh ay magiging 80px at ang 10vw ay magiging 100px. Gayundin, ang 10vmax ay magiging 100px, at ang 10vmin ay magiging 80px.

Sa puntong ito sa iyong viewport, maaaring hindi gaanong naiiba ang mga unit sa mga porsyento para sa iyo, ngunit malaki ang pagkakaiba. Sa kaso ng mga porsyento, ang lapad at taas ng mga elemento ng bata ay nakasalalay sa parent block. Halimbawa:

Sa demo makikita mo kung paano ang lapad ng unang elemento ng bata ay tumatagal ng 80% ng lapad ng magulang. Ang pangalawang bata ay may lapad na 80vw, na ginagawa itong mas malawak kaysa sa magulang nito.

Paglalapat ng mga unit ng viewport

Nakabatay ang mga unit na ito sa mga dimensyon ng viewport, kaya lubhang kapaki-pakinabang ang mga ito sa mga sitwasyon kung saan kailangang magbago ang lapad, taas, o dimensyon ng mga elemento depende sa mga sukat ng viewport.

Buong screen na mga larawan sa background at mga seksyon

Sa Internet, madalas kang makakahanap ng mga larawan sa background sa mga elemento na sumasakop sa buong screen. Ang parehong ay maaaring gawin sa disenyo ng website upang ang isang hiwalay na seksyon tungkol sa isang produkto o serbisyo ay sumasakop sa buong screen. Sa ganitong mga kaso, maaari mong itakda ang lapad ng mga elemento sa 100% at ang taas sa 100vh.

Tingnan natin ang susunod Halimbawa ng HTML: