Mayar da px zuwa vw Pixels ↔ Viewport width Kyauta A kan layi Amintacce
Ku rubuta ƙima a px ku karanta ta a vw nan take. Lissafin yana faruwa a cikin burauzarku, ba a aika komai ko'ina ba, kuma abin da mayarwar ta dogara da shi an rubuta shi a ƙasa maimakon a ɗauka.
Ba a ɗora komai ba
Girman da aka fi amfani da su — Mayar da px zuwa vw
| px | vw |
|---|---|
| 8 | 0.555556 |
| 10 | 0.694444 |
| 12 | 0.833333 |
| 14 | 0.972222 |
| 16 | 1.111111 |
| 18 | 1.25 |
| 20 | 1.388889 |
| 24 | 1.666667 |
| 32 | 2.222222 |
| 48 | 3.333333 |
| 64 | 4.444444 |
Daga ina waɗannan ma'aunai suka fito
Pixel a CSS ba shi ne pixel a allonku ba. Lokacin da yawan pixel na allo ya daina zama abin da za a iya hasashe, shafi da aka auna da pixel na gaske ya zama shafi da yake ƙanƙancewa yayin da allo ke ƙara kaifi, don haka aka sake bayyana CSS pixel a matsayin tsawon abin tunani: kusan 1/96 na inci da ake gani a nesa mai daɗin karatu. Duk sauran abubuwan da ke wannan shafin an gina su a kai. Em ya girmi yanar gizo — a rubutun ƙarfe ya kasance faɗin tubalin da aka yi, mai suna daga babban harafin M — kuma a CSS yana nufin girman rubutu da ke aiki, shi ya sa yake canzawa yayin da kuke saka abubuwa cikin juna. An ƙara rem don guje wa daidai wannan: shi ne em na tushen element kuma ba ya taruwa. Vw ya zo da zanen shafi mai daidaitawa (responsive design): kashi ɗaya cikin ɗari na faɗin viewport, komai ya zama.
Inda kuke haɗuwa da su
Waɗannan su ne ma'aunan kowane stylesheet. Pixels suna ba da girman iyaka, inuwa da duk abin da bai kamata ya canza girma ba; rem yana ba da girman rubutu, tazara da tsari, domin sauyi ɗaya a tushe ya sake girman duk mahaɗa; em yana ba da girman abubuwan da ya kamata su bi rubutunsu, kamar padding ɗin cikin maɓalli; vw yana ba da girman kanun labarai da sassan hero da dole su cika allo a kowace na'ura. Juyawa tsakaninsu shi ne lissafin yau da kullum na mayar da zane da aka ba da shi da pixel zuwa stylesheet da ke daidaita girma.
Tambayoyin da mutane ke yi
Me ya sa 16 px ne wurin farawa na kullum?
Domin shi ne girman rubutu na asali a kowane babban browser, kuma stylesheet da bai soke shi ba yana gadonsa. Rem ɗaya saboda haka daidai yake da 16 px a saitin asali, wanda shi ne asalin juyawar da aka saba da ita: 0.5 rem shi ne 8 px, 1.5 rem shi ne 24 px. Idan mai amfani ya ƙara girman asali a saitunan browser ɗinsa, waɗannan ƙimar rem ɗin suna girma tare da shi — wanda shi ne ainihin manufar amfani da su.
Rem zan yi amfani da shi ko em?
Rem ga duk abin da ya kamata ya bi shafi gaba ɗaya — ma'aunin rubutu, tazara, faɗin tsari — domin ana aunawa daga tushe kuma ba ya taruwa. Em ga duk abin da ya kamata ya bi rubutun da yake ciki: padding na maɓalli, tazara kusa da icon, shigar sakin layi na ambato. Kuskuren da aka fi yi shi ne saka abubuwa masu girman em cikin juna, inda 1.2 em a cikin 1.2 em ya zama 1.44, sannan 1.73, har rubutun ƙasan shafin ya ninka girman da aka nufa.
Shin amsar daidai ce?
Inda aka ayyana ma'aunai biyun ta hanyar juna da cikakkun lambobi, i — shafin yana faɗin haka a saman lambar, kuma zagaye kawai shi ne yawan lambobin da ake nunawa. Inda rabon ba shi da lambar goma mai ƙarewa, shafin yana nuna muhimman lambobi goma sha biyu kuma yana cewa alaƙar kintace ce maimakon ya yi kamar ba haka ba ne.
Shin wani abu da na rubuta yana barin na'urata?
A'a. Ana yin lissafin a cikin burauzarku; ba a ɗora komai ba, kuma babu uwar garke da za a ɗora zuwa gare ta. Ku buɗe shafin sau ɗaya zai ci gaba da aiki ko da an kashe hanyar sadarwa.
Dalilin da ya sa ake canza px zuwa vw
Mai zane ya aiko da samfurin ƙira da aka zana a faɗin 1440 px, mai babban taken labari na 96 px da tazarar sassa ta 72 px. A yanar gizo ta gaske za a ga shafin a 360 px a waya, 820 px a kwamfutar hannu da 2560 px a babban allon kwamfuta, kuma mai zane yana so taken ya riƙe gwargwadonsa ga allo a kowanne. Naúrar da aka yi don haka ita ce faɗin viewport, vw, kuma hanyar zuwa gare ta daga samfurin ƙira ita ce canza px zuwa vw: ka ɗauki ƙimar pixel, ka raba ta da faɗin da aka zana ƙirar a kai, ka ninka da ɗari. Taken labari na 96 px a kan zane na 1440 px shi ne 6.67 vw, kuma daga nan koyaushe yana kashi 6.67 cikin ɗari na duk abin da allon yake.
Wannan shi ne alƙawarin naúrar viewport, kuma haɗarinta ma. Rem da em suna farawa daga girman rubutu, wanda burauza ke saitawa zuwa tsohuwar ƙima mai ma'ana. Vw ba ta da tsohuwar ƙima ko kaɗan: faɗin viewport kawai shi ne yadda taga mai karatu yake da faɗi, kuma yana canzawa idan sun juya waya ko suka ja taga. Don haka mai canzawa ba ya ɓoye lambar da amsar ta dogara a kai. Faɗin ƙirar yana cikin fili, yana farawa daga 1440 px, kuma za ka iya canza shi don ya dace da samfurin ƙirarka.
Lissafin yana gudana a cikin burauzarka kuma ba a loda komai ba. A ƙasa za ka sami dabarar lissafi, abin da canzawar ke riƙewa da abin da ba ta iya riƙewa, inda naúrorin viewport suke taimakawa da inda suke cutarwa, matsalar samun dama da rubutu na vw zalla ke haifarwa, dabarar clamp da ke gyara ta, da hanyar mayar da samfurin ƙira na pixel zuwa takardar salo mai sassauci.
Dabarar lissafi da faɗi
vw daidai yake da px a raba da faɗi, a ninka da ɗari
Dabarar ita ce vw = px ÷ width × 100. Da faɗin ƙira na 1440 px, girma na 144 px ya zama 10 vw, 72 px ya zama 5 vw kuma 24 px ya zama 1.667 vw. Shafin yana nuna faɗin kusa da sakamakon, kamar 144 px = 10 vw (1440 px), don ka ga abin da aka ɗauka. Vw ɗaya shi ne kashi ɗaya cikin ɗari na faɗin viewport, don haka taga mai faɗin 1000 px tana da 1 vw daidai da 10 px.
Daga ina 1440 yake fitowa
1440 px ɗin nan faɗi ne da ake yawan zana ƙira a kai, al'ada ce ba ƙa'ida ba. Wasu ƙungiyoyi suna zana a 1280, da yawa a 1920, kuma ƙirar wayar hannu a 375 ko 390. Babu amsa daidai, sai faɗin da fayil ɗin ƙirarka yake amfani da shi. Rubuta naka: canzawar ba ta fi faɗin da ka ba ta kyau ba.
Amfani da faɗin ƙirar kanta
Idan an zana samfurin ƙira a 1920 px, rubuta 1920, kuma taken labari ɗaya na 96 px ya zama 5 vw. Idan ka canza px zuwa vw da faɗin da bai dace ba, shafin zai yi kyau a girman allo ɗaya kuma ba daidai ba a duk sauran, wanda kuskure ne mai ban mamaki idan ba ka san inda za ka duba ba.
Abin da canzawar ke riƙewa da abin da ba ta iya
Tana riƙe da rabon allo
Vw ɗaya shi ne kashi ɗaya cikin ɗari na faɗin viewport, don haka girma da aka rubuta da vw yana girma yana ƙanƙancewa tare da taga maimakon ya tsaya a wuri ɗaya. Sakamakon shi ne rabon allo da ƙimar pixel ta mamaye a samfurin ƙirarka, kuma a burauza ɓangaren yana riƙe wannan rabo a kowane faɗi.
Ba za ta iya ba da tsohuwar ƙima ba
Ba kamar rem ba, vw ba ta da tsohuwar ƙima. Burauza tana ba girman rubutu na tushe 16 px idan babu wanda ya faɗi wani abu daban, don haka shafin rem zai iya farawa daga lamba ta gaske; faɗin viewport kawai shi ne yadda taga mai karatu take da faɗi, kuma yana canzawa idan sun juya waya. Faɗin da ke cikin filin shi ne faɗin ƙirarka, kuma amsar daidai ce ga allo mai wannan faɗin kuma daidai gwargwado a duk sauran wurare.
Zagayawa
Rabawa da 1440 yana haifar da dogayen ƙananan adadi ga yawancin girma. Ƙima kamar 6.6667 vw ba laifi ba ce a cikin takardar salo, amma za ka iya zagaya zuwa 6.67 ko 6.7 ba tare da wani canji da ake gani ba. Ka riƙe lambobi biyu ko uku bayan digo; fiye da haka hayaniya ce kawai.
Inda naúrorin viewport ke taimakawa
Taken labari na gaba da manyan rubutu na nunawa
Taken labari da dole ne ya cika wani rabo na allo a kowace na'ura shi ne amfani na gargajiya. A faɗin waya taken labari tsayayye na 96 px zai cika shafin ya wuce; a cikin vw yana ƙanƙancewa tare da allo kuma ya tsaya a layi ɗaya.
Sassan da ke cika faɗin shafi
Tazarar da ke tsakanin manyan sassan shafin sauka sau da yawa tana fi kyau idan tana girma tare da allo, don shafin ya riƙe daidaitonsa a ƙaramar kwamfuta ta ƙirji da babban allo. Giɓi a cikin vw suna yin haka.
Zane-zane da dole ne su riƙe siffarsu
Hotunan banner, zane-zane da siffofi na ado da aka auna da vw suna riƙe gwargwadonsu ga taga, don kada tsarin ya watse yayin da allo ke canzawa.
Rubutu mai sassauci da iyaka
Idan aka haɗa da clamp(), vw yana ba da rubutu da ke girma a hankali tsakanin mafi ƙanƙanta da mafi girma. Wannan ita ce dabarar da takardun salo na zamani ke amfani da ita ga taken labari, kuma an bayyana ta a ƙasa.
Inda naúrorin viewport ke cutarwa
Rubutun jiki a cikin vw zalla
Rubutu da aka auna da vw kawai ba ya amsawa idan mai karatu ya ƙara girman shafi a burauza, domin ƙara girman yana canza girman pixel na taga amma girman vw yana riƙe rabonsa. Mutanen da ke dogara da ƙara girma, sau da yawa saboda idanunsu ba su da kyau, ana bar su da rubutu da ba za su iya faɗaɗawa ba. Jagororin samun dama suna buƙatar a iya canza girman rubutu, kuma girman vw zalla ya faɗi wannan gwaji.
Matsananci biyu: ƙarami da babba
A faɗin 320 px taken labari na 6.67 vw shi ne 21 px, wanda zai iya zama ƙarami sosai. A faɗin 2560 px shi ne 171 px, wanda ya yi girma ƙwarai. Ba tare da iyaka ba, gwargwadon da ya yi kyau a 1440 zai iya zama abin dariya a gefuna.
Sandar gungurawa
A burauzoci na kwamfuta, faɗin viewport da ake amfani da shi don vw ya haɗa da faɗin sandar gungurawa ta tsaye. Akwati da aka saita zuwa 100vw don haka zai fi yankin da ake gani faɗi kaɗan idan shafin yana gungurawa, kuma sandar gungurawa ta kwance na iya bayyana. Ka san wannan kafin ka gina tsarin shafi na cikakken faɗi da vw.
Dabarar clamp
Saita ƙasa da rufi
Aikin CSS clamp(min, preferred, max) yana ɗaukar mafi ƙanƙanta, ƙimar da aka fi so da mafi girma. Ga rubutu, rubuta mafi ƙanƙanta da mafi girma a rem, da ƙimar da aka fi so a vw tare da ƙarin rem: font-size: clamp(2rem, 1rem + 4vw, 6rem). Girman yana girma tare da taga tsakanin 32 da 96 px kuma ba ya wuce ko wane ƙarshe. Domin wani ɓangare yana cikin rem, rubutun har yanzu yana mutunta saitunan mai karatu.
Yadda ake gina tsakiyar ɓangare
Zaɓi faɗin allo biyu da girman da kake so a kowanne. Misali 32 px a faɗin 360 px da 96 px a faɗin 1440 px. Gangara ita ce (96 − 32) ÷ (1440 − 360) = 0.0593 px a kowane px na faɗi, wato 5.93 vw, kuma tsayin farko shi ne 32 − 0.0593 × 360 = 10.67 px, kusan 0.667 rem. Ɓangaren da aka fi so don haka shi ne 0.667rem + 5.93vw. Mai canzawa yana taimakawa da ɓangaren vw, kuma minti ɗaya na lissafi yana yin sauran.
Dalilin da ya sa wannan ke daidaita abubuwa
Da clamp, kana samun sassaucin da masu zane ke so da samun damar da masu karatu ke buƙata. Ita ce amsar matsalar da aka bayyana a sama, kuma dalilin da ya sa yawancin takardun salo na zamani ke amfani da vw a cikin clamp kawai.
Yadda ake canza px zuwa vw a nan
Rubuta ƙimar pixel
Shigar da girman da pixel a cikin filin farko. Ana karɓar ƙananan adadi.
Saita faɗin ƙira
Bar shi a 1440 idan wannan shi ne faɗin samfurin ƙirarka. Canza shi idan ba haka ba. Sakamakon yana sabuntawa yayin da kake rubutawa.
Kwafe ƙimar vw
Yi amfani da lambar a cikin CSS ɗinka tare da naúrarta, kamar font-size: 6.67vw. Ga rubutu, sanya ta a cikin clamp() tare da iyaka a rem.
Daga ina waɗannan naúrori suka fito
Pixel na CSS
Lokacin da allon nuni suka daina samun yawa mai iya hasashe, shafin da aka auna da ainihin pixel ya zama shafin da ke ƙanƙancewa yayin da allo ke daɗa kaifi. Don haka aka sake bayyana pixel na CSS a matsayin tsayin tunani: kusan 1/96 na inci da ake gani daga nisan karatu mai daɗi. Ita ce naúrar da aka zana samfurin ƙirarka da ita.
Naúrorin viewport
Vw ta zo tare da ƙira mai amsawa: kashi ɗaya cikin ɗari na faɗin viewport, duk yadda ya zama. Tana tare da rem, wadda ke dangantaka da girman rubutu na tushe, da em, wadda ke dangantaka da ɓangaren. Idan kana buƙatar girma masu dangantaka da rubutu maimakon allo, canza px zuwa rem.
Tarko lokacin da kake canza px zuwa vw
Amfani da faɗin ƙira da bai dace ba
Kuskuren da aka fi yi. Idan samfurin ƙirarka faɗinsa 1920 ne kuma ka canza da 1440, kowane girma yana kuskure da kashi ɗaya cikin uku. Tabbatar da faɗin firam a kayan aikin ƙirarka.
Mantawa da ƙirar wayar hannu
Ƙungiyoyi da yawa suna da samfurin ƙira biyu, ɗaya na kwamfuta ɗaya na waya. Taken labari da yake 96 px a na farko da 40 px a na biyu ba ƙimar vw ɗaya ba ce. Yi amfani da faɗi biyu, canzawa biyu da clamp don haɗa su.
Sanya shafin duka a cikin vw
Shafin da komai ke girma da ƙanƙancewa tare da taga yana rasa ma'anar karatu: layuka suna yin tsayi sosai a manyan allo kuma rubutu ya zama ƙarami a kunkuntai. Yi amfani da vw ga ƙananan abubuwa da ya kamata su yi girma da ƙanƙancewa, da girma tsayayye ko rem ga sauran.
Rashin kulawa da matsalar ƙara girma
Gwada shafinka da burauza a ƙara girma zuwa kashi 200 cikin ɗari. Idan rubutun bai yi girma ba, girman yana buƙatar ɓangaren rem.
Tambayoyin da mutane ke yi kafin su canza
Vw nawa ne 100 px?
A faɗin ƙira na 1440 px, kusan 6.94 vw.
Menene mafi kyawun faɗin ƙira da za a yi amfani da shi?
Wanda aka zana samfurin ƙirarka a kai. Babu tsohuwar ƙima ta duniya.
Shin vw ta fi rem?
Suna yin ayyuka daban-daban. Rem tana bin girman rubutun mai karatu; vw tana bin taga. Yi amfani da kowacce don abin da take da kyau a kai.
Zan iya amfani da vw don girman rubutu?
Eh, amma sanya ta a cikin clamp() da iyaka a rem, don rubutun ya kasance mai karantuwa kuma a iya ƙara masa girma.
Ana loda lambata?
A'a. Lissafin yana gudana a cikin burauzarka kuma ba a aika komai ko'ina ba.
Ta yaya zan koma baya?
Da vw zuwa px, wanda ke ninkawa da faɗi maimakon rabawa.
Zaɓi cikin hikima lokacin da kake canza px zuwa vw
Yanke shawarar abin da ya kamata ya bi allo
Manyan taken labari, manyan giɓi da zane-zane: eh. Rubutun jiki, iyaka, ƙananan sarrafawa: a'a. Gajarta jerin ƙimar vw ɗinka, shafin zai fi ƙarfi.
Canza a lokacin ƙira
Idan ka canza px zuwa vw yayin da kake karanta samfurin ƙira, za ka iya ganin nan take ƙimar da suka fito marasa daidaito ka nemi mai zane ya ba da ƙima mafi tsabta. Taken labari da ya fito 6.6667 vw yana gayyatar tattaunawa kan mayar da shi 6.5 ko 7.
Ajiye bayanin faɗin
Rubuta faɗin ƙira a cikin sharhi a saman takardar salo, don duk wanda zai canza daga baya ya yi amfani da iri ɗaya. Faɗi iri-iri suna haifar da shafi mara daidaito ta hanyar da babu wanda zai iya bayyanawa sosai.
Aiki daga samfurin ƙira zuwa takardar salo mai sassauci
Jera girman da ya kamata su yi girma da ƙanƙancewa
Buɗe fayil ɗin ƙira ka rubuta kowane girma da kake so ya bi allo: taken labari na gaba, giɓin sassa, wataƙila babban zane. Ga kowanne, canza px zuwa vw da faɗin firam, ka lura da sakamakon. Yawancin shafuka suna ƙarewa da ƙasa da ƙimar goma irin waɗannan, kuma komai ya ci gaba da kasancewa a rem ko pixel.
Duba firam ɗin wayar hannu daban
Idan akwai samfurin ƙira na waya, karanta ɓangarori ɗaya a faɗinsa. Taken labari na 96 px a firam na 1440 px da 40 px a firam na 375 px ba ya dacewa da ƙimar vw ɗaya, wanda alama ce ta amfani da clamp: girman waya ya zama ƙasa, girman kwamfuta ya zama rufi, kuma ɓangaren vw yana yin aiki a tsakani. Idan ka canza px zuwa vw ga kowane firam, lambobin biyu suna ayyana gangara.
Bita a faɗi uku
Duba shafin da aka gama a kusan 360, 820 da 1440 pixel, kuma sau ɗaya a 2560. Tsarin shafi mai sassauci yana da sauƙin gyarawa daidai a faɗin samfurin ƙira kuma yana da ɗan kuskure a wani wuri, kuma gajeren zagaye ta waɗannan faɗi yana gano yawancin matsaloli kafin baƙo ya gano.
Ka nisantar da naúrar daga dogon rubutu
Layukan rubutun karatu sun fi kyau idan aka auna su da rem, aka ba su matsakaicin tsayin layi na kusan haruffa 60 zuwa 75. Yi amfani da naúrar viewport don rubutu na nunawa da tazara, ka bar rubutun karatu ya tsaya tsayayye.
Masu canzawa masu alaƙa
Iyali ɗaya na kayan aiki yana rufe canzawa maƙwabta. Don komawa zuwa pixel, yi amfani da vw zuwa px. Ga girma masu dangantaka da tushe, akwai px zuwa rem da rem zuwa px, kuma ga girma masu dangantaka da ɓangaren, px zuwa em da em zuwa px. Ga launuka na takardar salo ɗaya, HEX zuwa RGB da HEX zuwa HSL suna sarrafa rubuce-rubucen.
Misali da aka yi aiki da shi
Ka ɗauka an tsara shafin sauka a 1440 px, mai taken labari na gaba na 96 px da giɓi na 72 px a samansa. Ka rubuta 96 ka karanta 6.667 vw, ka rubuta 72 ka karanta 5 vw. A taga ta 1000 px taken shi ne 66.7 px kuma giɓin 50 px, daidai gwargwado. Amma a waya mai faɗin 360 px taken zai zama 24 px, wanda ya fi ƙanƙanta da yadda kake so, don haka ka rubuta taken a matsayin clamp(2.25rem, 1rem + 5vw, 6rem), wanda ke ba da ƙasa ta 36 px da rufi na 96 px, kuma yana kasancewa mai karantuwa kuma ana iya ƙara masa girma. Giɓin, wanda ba shi da rubutu, yana kasancewa a vw zalla.
Ɗan jerin dubawa
Kafin canzawa
Nemo faɗin samfurin ƙira. Yanke shawarar girman da ya kamata su yi girma da ƙanƙancewa da waɗanda bai kamata ba.
Yayin canzawa
Rubuta ƙimar pixel da faɗin ƙira, ka kwafi lambar vw tare da naúrarta.
Bayan canzawa
Canza girman taga daga faɗin waya zuwa babban allon kwamfuta, ka ƙara girman shafin zuwa kashi 200 cikin ɗari. Ƙara iyaka da clamp() duk inda matsananci suka yi kama da ba daidai ba.
Kura-kurai na gama gari
Zaton 1440 ƙa'ida ce
Al'ada ce kawai. Yi amfani da faɗin ka na kanka.
Auna rubutun jiki da vw kaɗai
Ba za a iya ƙara masa girma ba. Ƙara ɓangaren rem da iyaka.
Mantawa da sandar gungurawa
100vw ya fi yankin da ake gani faɗi a shafukan kwamfuta masu gungurawa.
Lambobinka suna nan a na'urarka
Lissafin yana faruwa a cikin na'urarka. Burauzarka ce ke amfani da ƙimarka kuma ba a aika komai ko'ina ba. Babu abin da za a share daga baya kuma babu asusu da za a ƙirƙira. Wannan ita ce hanya mai sauƙi ta canza px zuwa vw.
Taƙaitawa
Don canza px zuwa vw a nan, rubuta girman da pixel da faɗin ƙirarka, ka karanta sakamakon nan take, ta amfani da dabarar vw = px ÷ width × 100. Faɗin yana farawa daga 1440 px, faɗi da ake yawan zana ƙira a kai, amma al'ada ce ba ƙa'ida ba, don haka rubuta naka. Canzawar tana riƙe da rabon allo: vw ɗaya shi ne kashi ɗaya cikin ɗari na faɗin viewport, don haka girman vw yana girma yana ƙanƙancewa tare da taga. Ba kamar rem ba, vw ba ta da tsohuwar ƙima, domin viewport shi ne yadda taga mai karatu take da faɗi. Ga rubutu, haɗa vw da rem a cikin clamp(), don ya kasance mai karantuwa kuma a iya ƙara masa girma. Ba a loda komai ba.