Mayar da vw zuwa px Viewport width ↔ Pixels Kyauta A kan layi Amintacce
Ku rubuta ƙima a vw ku karanta ta a px 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 vw zuwa px
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
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 vw zuwa px
Takardar salo ta ce font-size: 5.2vw a kan babban take, margin-top: 8vw a kan wani sashe da width: 42vw a kan wani hoto. Ƙimomi ne masu sassauci, kuma ba sa gaya maka abin da ke kan allo. Yaya girman taken yake a waya? Yaya faɗin hoton yake a kwamfutar ƙirji? Shin tazarar tana da kyau a 1920 pixel? Don ka gano, kana canza vw zuwa px: ka ninka lambar da faɗin taga ka raba da ɗari, ka karanta amsar a naúrar da masu zane, masu gwaji da abokan ciniki ke amfani da ita. Wannan shi ne abin da kake yi lokacin da kake bitar lambar da ke sassauci, kake duba wani gini da samfurin ƙira ko kake bayyana wa abokin aiki dalilin da ya sa take ya yi ƙanƙanta a kan allo kunkuntar.
Abin da ya bambanta wannan canzawar da ta rem ko em shi ne cewa mai ninkawa shi ne taga kanta. Vw ɗaya shi ne kashi ɗaya cikin ɗari na faɗin viewport, don haka 5.2vw shi ne 52 px a taga mai faɗin 1000 px, 18.7 px a waya mai faɗin 360 px da 99.8 px a babban allon kwamfuta na 1920. Babu tsohuwar ƙima da za a koma kanta, kuma faɗin yana canzawa idan mai karatu ya juya waya ko ya ja taga. Don haka mai canzawa yana tambayar faɗin, yana nuna shi kusa da amsar, kuma yana farawa daga 1440 px, faɗi da ake yawan zana ƙira a kai.
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, yadda ake karanta takardar salo mai sassauci a faɗi da yawa, tarkon sandar gungurawa, matsalar samun dama ta rubutu a vw zalla, da wasu halaye da ke sa lambar mai sassauci ta kasance mai fahimta.
Dabarar lissafi da faɗi
px daidai yake da vw a ninka da faɗi, a raba da ɗari
Dabarar ita ce px = vw × width ÷ 100. A faɗin 1440 px, 10 vw ya zama 144 px, 5 vw ya zama 72 px kuma 1.667 vw ya zama 24 px. Shafin yana buga faɗin kusa da sakamakon, don haka layi kamar 10 vw = 144 px (1440 px) yana gaya maka abin da aka ɗauka. Don ganin wani allo, canza faɗin ka sake karanta sakamakon.
Waɗanne faɗi za a gwada
Rukuni mai amfani da za a duba shi ne 360 ko 390 ga waya, 768 ga kwamfutar hannu a tsaye, 1024 ga ƙaramar kwamfutar ƙirji, 1440 ga kwamfutar ƙirji ko ta tebur ta yau da kullum da 1920 ga allon full-HD. Rubuta kowanne a filin faɗi ka lura da sakamakon. Karatu biyar suna nuna maka dukan kewayon ƙima, kuma duk wani matsanancin abu yana fitowa fili.
Amfani da faɗin ainihin taga
A cikin kayan aikin masu haɓakawa na burauzarka, sandar na'ura tana nuna faɗin taga da pixel. Yi amfani da wannan lambar don kwatanta abin da shafin yake yi da abin da mai canzawa ya ce. Idan sun yi daidai, karatunka na takardar salo daidai ne.
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. Ƙimar pixel da kake samu ita ce wannan rabo da aka mayar mai ma'ana ga wani faɗi na musamman.
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. 1440 px ɗin nan faɗi ne da ake yawan zana ƙira a kai, al'ada ce ba ƙa'ida ba. Rubuta naka.
Zagayawa
Ninkawa da faɗi da rabawa da 100 na iya haifar da ƙananan adadi. 6.67 vw a 1440 px shi ne 96.048 px. Burauzoci suna sarrafa pixel da ɓangarori, amma idan kana buƙatar cikakkiyar lamba don fayil ɗin ƙira, zagaya ka lura cewa zagayawar taka ce.
Karanta takardar salo mai sassauci
Ɗauki faɗi uku ka rubuta sakamakon
Zaɓi faɗi kunkuntar, na tsakiya da mai faɗi, misali 375, 1024 da 1920. Ga kowace ƙimar vw mai muhimmanci a takardar salo, canza vw zuwa px a kowanne faɗi ka rubuta lambobi ukun a bayanin kula. Take na 5.2 vw yana ba da 19.5, 53.2 da 99.8 pixel. Idan ka gani haka, ka san ko take yana karantuwa a ƙarshen kunkuntar kuma bai wuce kima ba a ƙarshen mai faɗi.
Nemi clamp
Lambar da aka rubuta da kyau mai sassauci tana sanya iyaka a kewayen vw da clamp(min, preferred, max). Idan ka ga clamp(2rem, 1rem + 4vw, 6rem), girman yana girma tsakanin 32 da 96 px kuma yana tsayawa a ƙarshen biyun. Lokacin da ka canza ɓangaren vw, ka tuna cewa tsakiyar kewayon ne kawai, kuma iyakokin su ne ke yanke abin da ke faruwa a gefuna.
Duba matsananci
Faɗin da ke da haɗari su ne mafi ƙanƙanta da mafi girma. A 320 px take na 6 vw shi ne 19 px; a 2560 shi ne 154 px. Idan babu ɗayansu da ya yi kyau kuma babu clamp, takardar salo tana buƙatar iyaka.
Tarko lokacin da kake canza vw zuwa px
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. Don haka 100vw ya fi yankin da ake gani faɗi kaɗan idan shafin yana gungurawa, da kusan 15 zuwa 17 pixel a tsarin da yawa. Ƙimar pixel da ka lissafa don haka ta fi faɗin da ake gani da take kama da ta wakilta girma kaɗan. A waya, inda sandunan gungurawa ke rufe shafin, tasirin ba ya nan.
Amfani da faɗin da bai dace ba
Sakamakon yana daidai ne kamar faɗin da ka rubuta. Idan tagar gwajinka tana da faɗin 1366 px kuma ka canza a 1440, kowace ƙima tana kuskure da kusan kashi biyar cikin ɗari. Karanta faɗin gaske daga kayan aikin masu haɓakawa.
Rikitar vw da kashi cikin ɗari
Faɗin 50% yana nufin faɗin iyaye, yayin da 50vw yana nufin taga. A cikin akwati kunkuntar su biyun sun bambanta sosai. Mai canzawa yana ba da amsar vw; idan ɓangarenka yana cikin akwati, iyayen na iya zama kunkuntai fiye da taga.
Mantawa cewa ba za a iya ƙara girman rubutu a vw ba
Rubutu da aka auna da vw kawai ba ya amsawa idan mai karatu ya ƙara girman shafi, domin taga da rubutu suna girma tare. Jagororin samun dama suna buƙatar a iya canza girman rubutu. Ƙara ɓangaren rem, kamar a cikin clamp(), don rubutun ya amsa ƙara girma ma.
Tambayoyin da mutane ke yi kafin su canza
Pixel nawa ne 1 vw?
Kashi ɗaya cikin ɗari na faɗin taga: 14.4 px a 1440, 10 px a 1000, 3.6 px a 360.
Pixel nawa ne 50 vw?
Rabin taga: 720 px a faɗin 1440, 500 px a faɗin 1000.
Me ya sa shafina ya fi allo faɗi?
Akwati na 100vw a shafi da ke gungurawa ya fi yankin da ake gani faɗi domin ana ƙirga sandar gungurawa. Yi amfani da 100% a cikin akwati maimakon haka.
Shin vw iri ɗaya ce da kashi cikin ɗari?
A'a. Kashi cikin ɗari yana nufin iyaye, vw tana nufin taga.
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 px zuwa vw, wanda ke rabawa da faɗi maimakon ninkawa.
Ƙimomi na gama gari a faɗi na gama gari
Tebur na hankali
Yana taimakawa a san wasu ginshiƙai don ka iya kimantawa kafin ka yi amfani da mai canzawa. A faɗin 1000 px, 1 vw shi ne 10 px, wanda ke sa lissafin ya zama mai sauƙi: 2.5 vw shi ne 25 px, 8 vw shi ne 80 px. A 1440 px, 1 vw shi ne 14.4 px. A 375 px, 1 vw shi ne 3.75 px, don haka take na 8 vw shi ne 30 px. Lokacin da ka canza vw zuwa px don saurin dubawa, fara daga ɗaya daga cikin waɗannan ginshiƙai ka daidaita.
Faɗi uku, takardar salo ɗaya
Ɗauki kati mai faɗin 80vw, giɓi na 4vw da take na 6vw. A waya ta 375 px suna zuwa 300 px, 15 px da 22.5 px. A kwamfutar hannu ta 768 px, 614 px, 30.7 px da 46 px. A kwamfutar tebur ta 1440 px, 1152 px, 57.6 px da 86.4 px. Ganin dukansu uku gefe da gefe yana gaya maka nan da nan cewa katin ya yi faɗi da yawa a kwamfutar tebur kuma take ya yi girma da yawa, kuma wataƙila kana buƙatar matsakaicin faɗi da clamp.
Bayan viewport
Naúrorin akwati
CSS na sabuwa yana ba da naúrori masu dangantaka da akwati maimakon taga, kamar cqw, wanda shi ne kashi ɗaya cikin ɗari na faɗin akwati. Suna warware matsalar cewa wani ɓangare da aka sanya a kunkuntar mashaya ta gefe yana nuna hali kamar yana da taga duka. Idan ka yi amfani da su, lissafin iri ɗaya ne da na vw, tare da faɗin akwati a matsayin tushe, kuma za ka iya amfani da wannan mai canzawa ta hanyar rubuta wannan faɗin.
Ƙananan viewport, manya da masu canzawa
A waya, yankin da ake gani yana canzawa yayin da sandar adireshi ke zamewa. Ga tsayi, sabbin naúrori svh, lvh da dvh suna bayyana ƙaramin viewport, babba da mai canzawa. Ga faɗi lamarin ya fi sauƙi, domin sandar adireshi ba ta shafe shi ba, kuma vw tana tsayayye. Wannan wani dalili ne da ya sa vw ta fi vh aminci don ƙira mai sassauci a wayar hannu.
Kashi cikin ɗari, vw da grid
Faɗin kashi cikin ɗari yana bin iyaye, vw tana bin taga, kuma CSS grid da flexbox suna bin sararin da ake da shi. Sau da yawa mafi kyawun tsarin shafi masu sassauci suna amfani da grid da kashi cikin ɗari don tsari kuma vw don rubutu da tazara kawai, domin waɗannan su ne abubuwan da ke amfana daga bin allo kai tsaye. Lokacin da ka canza vw zuwa px don duba tsarin shafi, tambayi ko hanyar grid za ta faɗi abu iri ɗaya a hanya mafi ƙarfi.
Bayyana vw ga mutanen da ba sa rubuta CSS
Yi amfani da taga a matsayin ma'auni
Abokan ciniki da abokan aiki yawanci suna fahimtar ra'ayin idan ka ce vw kashi ɗaya ne cikin ɗari na faɗin allo. Take na 5 vw faɗinsa kashi biyar cikin ɗari ne na allo. Sannan nuna musu lambobi biyu: abin da yake zuwa a wayarsu da kuma a babban allon kwamfuta a ɗakin taro. Lokacin da ka canza vw zuwa px ga faɗi biyun ka faɗi sakamakon da babbar murya, ra'ayin girma da ke tafiya tare da allo ya zama mai ma'ana.
Faɗi dalilin da ya sa ƙirar ba tsayayye ba ce
Masu ruwa da tsaki marasa fasaha wani lokaci suna tambaya dalilin da ya sa shafin ba ya da girma ɗaya kawai ga take. Amsar ita ce allo suna bambanta da ninki bakwai ko takwas tsakanin ƙaramar waya da babban allon kwamfuta, kuma girma tsayayye da ya dace da ɗaya ba daidai ba ne ga ɗayan. Naúrori masu sassauci su ne amsar, kuma lambobin pixel daga wannan shafi suna nuna yadda allo ke canza ƙima ɗaya.
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 wannan shafi ke ba da amsoshinsa 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. Don ganin yadda ƙimar pixel iri ɗaya take a waɗannan naúrori, canza rem zuwa px ka kwatanta.
Halaye da ke sa lambar mai sassauci ta kasance mai fahimta
Yi sharhi kan ƙimomin pixel
Layi kamar font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ yana kashe 'yan kalmomi kuma yana ceton mai karatu na gaba sau da yawa na canzawa.
Ajiye faɗin ƙira a wuri ɗaya
Idan aikinka yana da keɓaɓɓen kadara don faɗin da aka zana ƙira a kai, ana iya bin kowace ƙimar vw zuwa gare shi. Lokacin da ka canza vw zuwa px don bita, ka san wane faɗi za ka yi amfani da shi.
Yi amfani da vw da hankali
Gajeren jerin ƙimar vw yana da sauƙin tunani a kai. Takardar salo da komai a cikinta vw ne ba haka ba. Ajiye ta don rubutun nunawa, manyan giɓi da zane-zane.
Gwada da na'urori na gaske idan yana da muhimmanci
Kayan aikin burauza suna kwaikwayon faɗi da kyau, amma waya ta gaske tana nuna ainihin halin sandunan adireshi, juyawa da ƙara girma. Duba na minti biyar a na'ura yana kama abin da kwaikwayo ya rasa.
Masu canzawa masu alaƙa
Iyali ɗaya na kayan aiki yana rufe canzawa maƙwabta. Don komawa zuwa vw, yi amfani da px zuwa vw. 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 RGB zuwa HEX suna sarrafa rubuce-rubucen.
Misali da aka yi aiki da shi
Ka ɗauka mai gwaji ya ba da rahoton cewa babban take yana da wuyar karantawa a ƙaramar waya. Takardar salo ta ce font-size: 5.2vw ba tare da iyaka ba. Ka canza vw zuwa px a 360 ka karanta 18.7 px, a 768 ka karanta 39.9 px, a 1440 ka karanta 74.9 px. A ƙarshen kunkuntar take ya fi rubutun jiki girma kaɗan kuma ba ya karantuwa a matsayin take. Ka ba da shawarar clamp(2rem, 1rem + 4vw, 5rem), wanda ke ba da 32 px a mafi kunkunta, kusan 51 px a 768 da 5rem, 80 px, a mafi faɗi. Mai gwajin ya tabbatar cewa yanzu yana karantuwa da kyau, kuma take yana ci gaba da girma da ƙanƙancewa.
Ɗan jerin dubawa
Kafin canzawa
Zaɓi faɗin da kake kula da su, daga kayan aikin masu haɓakawa ko daga jerin na'urorin da kake nufi.
Yayin canzawa
Rubuta ƙimar vw da kowane faɗi bi da bi, ka lura da pixel da ake nunawa kusa da tushe.
Bayan canzawa
Duba matsananci. Idan girma ya yi ƙanƙanta ko ya yi girma a kowane ƙarshe, ƙara iyaka da clamp().
Kura-kurai na gama gari
Zaton amsa ɗaya ce
Ƙimar vw tana da girman pixel daban a kowane faɗi. Ka ba da faɗin tare da kowace lamba.
Mantawa da sandar gungurawa
100vw yana haɗa ta, don haka akwati na cikakken faɗi na iya ambaliya.
Auna rubutun jiki da vw kaɗai
Ba za a iya ƙara masa girma ba. Ƙara ɓangaren rem da iyaka.
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 vw zuwa px.
Taƙaitawa
Don canza vw zuwa px a nan, rubuta girman a vw da faɗin taga, ka karanta sakamakon da pixel nan take, ta amfani da dabarar px = vw × 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 girma a 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.