Badilisha vw kuwa px Viewport width ↔ Pixels Bure Mtandaoni Salama
Andika thamani katika vw na uisome katika px papo hapo. Hesabu hufanyika kwenye kivinjari chako, hakuna kinachotumwa popote, na kile ambacho ubadilishaji unategemea kimeandikwa hapa chini badala ya kudhaniwa.
Hakuna kinachopakiwa
Ukubwa wa kawaida — Badilisha vw kuwa px
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
Vipimo hivi vinatoka wapi
Pikseli katika CSS si pikseli iliyo kwenye skrini yako. Skrini zilipoacha kuwa na msongamano unaotabirika, ukurasa uliopimwa kwa pikseli halisi ukawa ukurasa uliopungua ukubwa skrini zilipozidi kuwa kali, kwa hivyo pikseli ya CSS ilifafanuliwa upya kuwa urefu wa marejeleo: takriban 1/96 ya inchi inapotazamwa kwa umbali mzuri wa kusoma. Kila kitu kingine kwenye ukurasa huu kimejengwa juu ya hilo. Em ni ya zamani kuliko wavuti — katika herufi za chuma ilikuwa upana wa kipande kilichotupwa, ikipewa jina kutokana na herufi kubwa M — na katika CSS inamaanisha ukubwa wa fonti unaotumika, ndiyo maana hubadilika unapoweka vipengele ndani ya vingine. Rem iliongezwa ili kuepuka hasa hilo: ni em ya kipengele cha mzizi na haijikusanyi kamwe. Vw ilikuja na usanifu sikivu: sehemu ya mia moja ya upana wa kiona-mwanga, chochote kitakachokuwa.
Unavikuta wapi
Hivi ni vipimo vya kila stylesheet. Pikseli hupima mipaka, vivuli na kila kitu kisichopaswa kubadilika ukubwa; rem hupima maandishi, nafasi na mpangilio, ili badiliko moja kwenye mzizi libadilishe kiolesura kizima; em hupima vitu vinavyopaswa kufuata maandishi yake yenyewe, kama nafasi ya ndani ya kitufe; vw hupima vichwa vya habari na sehemu kuu zinazopaswa kujaza skrini kwenye kifaa chochote. Kubadilisha kati yake ni hesabu ya kila siku ya kugeuza usanifu uliokabidhiwa kwa pikseli kuwa stylesheet inayoweza kubadilika ukubwa.
Maswali ambayo watu huuliza
Kwa nini px 16 ndiyo mahali pa kawaida pa kuanzia?
Kwa sababu huo ndio ukubwa chaguomsingi wa maandishi katika kila kivinjari kikuu, na stylesheet isiyoubadilisha huurithi. Kwa hivyo rem moja ni sawa na px 16 kwenye mpangilio chaguomsingi, ndiko zinakotoka ubadilishaji unaojulikana: rem 0.5 ni px 8, rem 1.5 ni px 24. Mtumiaji akiwa ameongeza ukubwa chaguomsingi katika mipangilio ya kivinjari chake, thamani hizohizo za rem hukua pamoja nao — ambalo ndilo lengo hasa la kuzitumia.
Nitumie rem au em?
Rem kwa chochote kinachopaswa kufuata ukurasa mzima — mizani ya maandishi, nafasi, upana wa mpangilio — kwa sababu inapimwa kutoka mzizi na haijikusanyi kamwe. Em kwa chochote kinachopaswa kufuata maandishi ambamo kimekaa: nafasi ya ndani ya kitufe, pengo kando ya ikoni, uingizaji wa nukuu. Kosa la kawaida ni kuweka vipengele vyenye ukubwa wa em ndani ya vingine, ambapo em 1.2 ndani ya em 1.2 huwa 1.44, kisha 1.73, hadi maandishi ya chini ya ukurasa yanakuwa mara mbili ya ukubwa uliokusudiwa.
Je, jibu ni sahihi kabisa?
Pale ambapo vipimo vyote viwili vimefafanuliwa kwa kutumia kimoja kingine kwa nambari kamili, ndiyo — ukurasa unasema hivyo juu ya nambari, na ukadiriaji pekee ni katika idadi ya tarakimu zinazoonyeshwa. Pale ambapo uwiano hauna desimali yenye mwisho, ukurasa unaonyesha tarakimu kumi na mbili muhimu na kusema kwamba uhusiano ni wa kukadiria, badala ya kujifanya vinginevyo.
Je, kitu ninachoandika kinatoka kwenye kifaa changu?
Hapana. Hesabu hufanyika kwenye kivinjari chako; hakuna kinachopakiwa na hakuna seva ya kukipokea. Pakia ukurasa mara moja na utaendelea kufanya kazi hata mtandao ukizimwa.
Kwa nini ubadilishe vw kuwa px
Karatasi ya mitindo inasema font-size: 5.2vw kwenye kichwa kikuu, margin-top: 8vw kwenye sehemu na width: 42vw kwenye picha. Hizo ni thamani zinazonyumbulika, na hazikuambii kilicho kwenye skrini. Kichwa kina ukubwa gani kwenye simu? Picha ina upana gani kwenye kompyuta mpakato? Je, pambizo inaonekana sawa kwa pikseli 1920? Ili kujua unabadilisha vw kuwa px: unazidisha nambari kwa upana wa dirisha na kugawa kwa mia moja, kisha unasoma jibu katika kitengo wanachotumia wabunifu, wajaribu na wateja. Ndicho unachofanya unapokagua msimbo unaonyumbulika, kulinganisha ujenzi na mchoro wa awali au kumweleza mwenzako kwa nini kichwa kinaonekana kidogo kwenye skrini nyembamba.
Kinachofanya ubadilishaji huu uwe tofauti na rem au em ni kwamba kizidisho ni dirisha lenyewe. vw moja ni moja kwa mia ya upana wa kiona, kwa hiyo 5.2vw ni 52 px katika dirisha lenye upana wa 1000 px, 18.7 px kwenye simu yenye upana wa 360 px na 99.8 px kwenye kifuatilizi kipana cha 1920. Hakuna kielelezo cha msingi cha kutegemea, na upana hubadilika msomaji anapozungusha simu au kuburuta dirisha. Kwa hiyo kibadilishaji huomba upana, huuonyesha kando ya jibu na huanza kwa 1440 px, upana ambao michoro mara nyingi huchorwa.
Hesabu hufanyika kwenye kivinjari chako, na hakuna kinachopakiwa. Hapa chini utapata fomula, kile ubadilishaji unachohifadhi na kisichoweza kuhifadhi, jinsi ya kusoma karatasi ya mitindo inayonyumbulika kwa upana kadhaa, mtego wa upau wa kusogeza, tatizo la ufikivu la maandishi ya vw tupu, na mazoea machache yanayofanya msimbo unaonyumbulika uendelee kueleweka.
Fomula na upana
px ni sawa na vw mara upana, ikigawanywa kwa mia moja
Fomula ni px = vw × width ÷ 100. Kwa upana wa 1440 px, 10 vw inakuwa 144 px, 5 vw inakuwa 72 px na 1.667 vw inakuwa 24 px. Ukurasa huchapisha upana kando ya matokeo, kwa hiyo mstari kama 10 vw = 144 px (1440 px) hukuambia kilichodhaniwa. Ili kuona skrini nyingine, badilisha upana na usome matokeo tena.
Upana upi wa kujaribu
Seti inayofaa kukagua ni 360 au 390 kwa simu, 768 kwa kompyuta kibao iliyosimama, 1024 kwa kompyuta mpakato ndogo, 1440 kwa kompyuta mpakato au ya mezani ya kawaida na 1920 kwa kifuatilizi cha full-HD. Andika kila moja kwenye sehemu ya upana na uandike matokeo. Usomaji tano hukuonyesha wigo mzima wa thamani, na kila kupindukia hujitokeza.
Kutumia upana wa dirisha halisi
Katika zana za msanidi programu za kivinjari chako, upau wa kifaa huonyesha upana wa dirisha kwa pikseli. Tumia nambari hiyo kulinganisha kile ukurasa unachofanya na kile kibadilishaji kinachosema. Zikikubaliana, usomaji wako wa karatasi ya mitindo ni sahihi.
Kile ubadilishaji unachohifadhi na kisichoweza
Huhifadhi sehemu ya skrini
vw moja ni moja kwa mia ya upana wa kiona, kwa hiyo ukubwa ulioandikwa kwa vw hukua na kupungua pamoja na dirisha badala ya kubaki palepale. Thamani ya pikseli unayopata ni sehemu hiyo iliyofanywa halisi kwa upana mmoja maalum.
Haiwezi kutoa kielelezo cha msingi
Tofauti na rem, vw haina kielelezo cha msingi. Kivinjari hupa ukubwa wa herufi wa mzizi 16 px wakati hakuna anayesema vinginevyo, kwa hiyo ukurasa wa rem unaweza kuanza kutoka nambari halisi; upana wa kiona ni upana wowote wa dirisha la msomaji, na hubadilika anapogeuza simu. 1440 px hapa ni upana ambao michoro mara nyingi huchorwa, mazoea na si kiwango. Andika wako mwenyewe.
Kukadiria
Kuzidisha kwa upana na kugawa kwa 100 kunaweza kutoa desimali. 6.67 vw kwa 1440 px ni 96.048 px. Vivinjari hushughulikia pikseli za sehemu, lakini kama unahitaji nambari kamili kwa faili ya usanifu, kadiria na uandike kwamba ukadiriaji ni wako.
Kusoma karatasi ya mitindo inayonyumbulika
Chukua upana tatu na uandike matokeo
Chagua upana mwembamba, wa kati na mpana, kwa mfano 375, 1024 na 1920. Kwa kila thamani muhimu ya vw kwenye karatasi ya mitindo, badilisha vw kuwa px kwa kila upana na uandike nambari hizo tatu kwenye maelezo. Kichwa cha 5.2 vw hutoa pikseli 19.5, 53.2 na 99.8. Ukikiona hivi, unajua kama kichwa kinasomeka upande mwembamba na hakizidi kiasi upande mpana.
Tafuta clamp
Msimbo unaonyumbulika ulioandikwa vizuri huweka mipaka kuzunguka vw kwa clamp(min, preferred, max). Ukiona clamp(2rem, 1rem + 4vw, 6rem), ukubwa hukua kati ya 32 na 96 px na hushikilia katika ncha zote mbili. Unapobadilisha sehemu ya vw, kumbuka kwamba ni katikati tu ya wigo, na mipaka huamua kinachotokea pembezoni.
Kagua ncha zote
Upana hatari ni mdogo zaidi na mkubwa zaidi. Kwa 320 px kichwa cha 6 vw ni 19 px; kwa 2560 ni 154 px. Kama hakuna kinachoonekana kukubalika na hakuna clamp, karatasi ya mitindo inahitaji mipaka.
Mitego unapobadilisha vw kuwa px
Upau wa kusogeza
Kwenye vivinjari vya kompyuta ya mezani, upana wa kiona unaotumika kwa vw unajumuisha upana wa upau wa kusogeza wa wima. Kwa hiyo 100vw ni pana kidogo kuliko eneo linaloonekana ukurasa unaposogezwa, kwa karibu pikseli 15 hadi 17 kwenye mifumo mingi. Thamani ya pikseli unayokokotoa kwa hiyo ni kubwa kidogo kuliko upana unaoonekana unaodhaniwa kuwakilisha. Kwenye simu, upau wa kusogeza unapokaa juu ya ukurasa, athari hiyo haipo.
Kutumia upana usio sahihi
Matokeo ni sahihi kama upana unaoandika tu. Kama dirisha lako la majaribio lina upana wa 1366 px na ukabadilisha kwa 1440, kila thamani ina kosa la karibu asilimia tano. Soma upana halisi kutoka kwenye zana za msanidi programu.
Kuchanganya vw na asilimia
Upana wa 50% unarejelea upana wa mzazi, ilhali 50vw inarejelea dirisha. Ndani ya kontena jembamba hizo mbili ni tofauti sana. Kibadilishaji hutoa jibu la vw; kama kipengele chako kiko ndani ya kontena, mzazi anaweza kuwa mwembamba kuliko dirisha.
Kusahau kwamba maandishi ya vw hayawezi kukuzwa
Maandishi yaliyopimwa kwa vw pekee hayajibu msomaji anapokuza ukurasa, kwa sababu dirisha na maandishi hupanuka pamoja. Miongozo ya ufikivu inataka maandishi yaweze kubadilishwa ukubwa. Ongeza kipengele cha rem, kama katika clamp(), ili maandishi yajibu ukuzaji pia.
Maswali ambayo watu huuliza kabla ya kubadilisha
1 vw ni pikseli ngapi?
Moja kwa mia ya upana wa dirisha: 14.4 px kwa 1440, 10 px kwa 1000, 3.6 px kwa 360.
50 vw ni pikseli ngapi?
Nusu ya dirisha: 720 px kwa upana wa 1440, 500 px kwa upana wa 1000.
Kwa nini ukurasa wangu ni mpana kuliko skrini?
Kisanduku cha 100vw kwenye ukurasa unaosogezwa ni pana kuliko eneo linaloonekana kwa sababu upau wa kusogeza unahesabiwa. Tumia 100% ndani ya kontena badala yake.
Je, vw ni sawa na asilimia?
Hapana. Asilimia inarejelea mzazi, vw inarejelea dirisha.
Je, nambari yangu inapakiwa?
Hapana. Hesabu hufanyika kwenye kivinjari chako na hakuna kinachotumwa popote.
Ninarudije?
Kwa px kuwa vw, ambayo hugawa kwa upana badala ya kuzidisha.
Thamani za kawaida kwa upana wa kawaida
Jedwali la kichwani
Husaidia kujua nanga chache ili uweze kukadiria kabla ya kutumia kibadilishaji. Kwa upana wa 1000 px, 1 vw ni 10 px, jambo linalofanya hesabu iwe rahisi sana: 2.5 vw ni 25 px, 8 vw ni 80 px. Kwa 1440 px, 1 vw ni 14.4 px. Kwa 375 px, 1 vw ni 3.75 px, kwa hiyo kichwa cha 8 vw ni 30 px. Unapobadilisha vw kuwa px kwa ukaguzi wa haraka, anza kutoka kwenye mojawapo ya nanga hizi na upanue.
Upana tatu, karatasi moja ya mitindo
Chukua kadi yenye upana wa 80vw, pengo la 4vw na kichwa cha 6vw. Kwenye simu ya 375 px zinakuwa 300 px, 15 px na 22.5 px. Kwenye kompyuta kibao ya 768 px, 614 px, 30.7 px na 46 px. Kwenye kompyuta ya mezani ya 1440 px, 1152 px, 57.6 px na 86.4 px. Kuona zote tatu kando kwa kando hukuambia mara moja kwamba kadi ni pana mno kwenye kompyuta ya mezani na kichwa kikubwa mno, na kwamba huenda unataka upana wa juu na clamp.
Zaidi ya kiona
Vitengo vya kontena
CSS mpya hutoa vitengo vinavyohusiana na kontena badala ya dirisha, kama cqw, ambayo ni moja kwa mia ya upana wa kontena. Vinatatua tatizo kwamba kijenzi kilichowekwa kwenye utepe mwembamba hutenda kana kwamba kina dirisha zima. Ukivitumia, hesabu ni ileile kama ya vw, ukitumia upana wa kontena kama msingi, na unaweza kutumia kibadilishaji hiki kwa kuandika upana huo.
Viona vidogo, vikubwa na vinavyobadilika
Kwenye simu, eneo linaloonekana hubadilika upau wa anwani unapoondoka. Kwa urefu, vitengo vipya svh, lvh na dvh vinaeleza kiona kidogo, kikubwa na kinachobadilika. Kwa upana hali ni rahisi zaidi, kwa kuwa upau wa anwani hauuathiri, na vw ni thabiti. Hiyo ni sababu moja zaidi kwa nini vw ni kitengo salama kuliko vh kwa usanifu unaonyumbulika kwenye simu.
Asilimia, vw na gridi
Upana wa asilimia hufuata mzazi, vw hufuata dirisha, na CSS grid na flexbox hufuata nafasi inayopatikana. Mara nyingi mpangilio bora unaonyumbulika hutumia grid na asilimia kwa muundo na vw kwa chapa na nafasi tu, kwa sababu hivyo ndivyo vinavyonufaika kwa kufuata skrini moja kwa moja. Unapobadilisha vw kuwa px kukagua mpangilio, jiulize kama safu ya grid ingesema jambo hilohilo kwa uthabiti zaidi.
Kuwaeleza vw watu wasioandika CSS
Tumia dirisha kama rula
Wateja na wenzako kwa kawaida huelewa wazo mara unaposema kwamba vw ni asilimia moja ya upana wa skrini. Kichwa cha 5 vw ni asilimia tano ya skrini kwa upana. Kisha waonyeshe nambari mbili: kinachofikia kwenye simu yao wenyewe na kwenye kifuatilizi kikubwa cha chumba cha mkutano. Unapobadilisha vw kuwa px kwa upana wote wawili na kusema matokeo kwa sauti, wazo la ukubwa unaosogea na skrini linakuwa halisi.
Eleza kwa nini usanifu haujaimarishwa
Wadau wasio wa kiufundi wakati mwingine huuliza kwa nini ukurasa hauna ukubwa mmoja tu wa kichwa. Jibu ni kwamba skrini hutofautiana kwa kigezo cha saba au nane kati ya simu ndogo zaidi na kifuatilizi kikubwa zaidi, na ukubwa usiobadilika unaofaa mmoja si sahihi kwa mwingine. Vitengo vinavyonyumbulika ndilo jibu, na takwimu za pikseli kutoka ukurasa huu zinaonyesha ni kiasi gani skrini hubadilisha thamani ileile.
Vitengo hivi vinatoka wapi
Pikseli ya CSS
Maonyesho yalipoacha kuwa na msongamano unaotabirika, ukurasa uliopimwa kwa pikseli halisi ukawa ukurasa uliopungua skrini zilipozidi kuwa kali. Kwa hiyo pikseli ya CSS ilifafanuliwa upya kama urefu wa rejeo: takriban 1/96 ya inchi inayotazamwa kwa umbali wa kusomea wenye starehe. Ndicho kitengo ambacho ukurasa huu hutoa majibu yake.
Vitengo vya kiona
vw ilikuja na usanifu sikivu: moja kwa mia ya upana wa kiona, chochote kinachotokea kuwa. Inakaa kando ya rem, inayohusiana na ukubwa wa herufi wa mzizi, na em, inayohusiana na kipengele. Ili kuona jinsi thamani ileile ya pikseli inavyoonekana katika vitengo hivyo, badilisha rem kuwa px na ulinganishe.
Mazoea yanayofanya msimbo unaonyumbulika uendelee kueleweka
Weka maelezo kuhusu thamani za pikseli
Mstari kama font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ hugharimu maneno machache na humwokoa msomaji anayefuata ubadilishaji kadhaa.
Weka upana wa usanifu mahali pamoja
Kama mradi wako una sifa maalum kwa upana ambao usanifu ulichorwa, kila thamani ya vw inaweza kufuatiliwa hadi huko. Unapobadilisha vw kuwa px kwa mapitio, unajua upana upi utumie.
Tumia vw kwa kiasi
Orodha fupi ya thamani za vw ni rahisi kufikiria. Karatasi ya mitindo ambapo kila kitu kiko kwenye vw si rahisi. Iweke kwa chapa ya maonyesho, mapengo makubwa na kazi za sanaa.
Jaribu kwa vifaa halisi inapojalisha
Zana za kivinjari huiga upana vizuri, lakini simu halisi inaonyesha tabia ya kweli ya upau wa anwani, kuzungusha na kukuza. Ukaguzi wa dakika tano kwenye kifaa hunasa kile uigaji unachokosa.
Vibadilishaji vinavyohusiana
Familia hiyohiyo ya zana inashughulikia ubadilishaji wa jirani. Ili kurudi kwa vw, tumia px kuwa vw. Kwa ukubwa unaohusiana na mzizi, kuna px kuwa rem na rem kuwa px, na kwa ukubwa unaohusiana na kipengele, px kuwa em na em kuwa px. Kwa rangi za karatasi hiyohiyo ya mitindo, HEX kuwa RGB na RGB kuwa HEX hushughulikia nukuu.
Mfano uliofanyiwa kazi
Tuseme mjaribu anaripoti kwamba kichwa kikuu ni kigumu kusoma kwenye simu ndogo. Karatasi ya mitindo inasema font-size: 5.2vw bila mipaka. Unabadilisha vw kuwa px kwa 360 na kusoma 18.7 px, kwa 768 unasoma 39.9 px, kwa 1440 unasoma 74.9 px. Upande mwembamba kichwa ni kikubwa kidogo tu kuliko maandishi ya mwili na hakisomeki tena kama kichwa. Unapendekeza clamp(2rem, 1rem + 4vw, 5rem), ambayo hutoa 32 px upande mwembamba zaidi, karibu 51 px kwa 768 na 5rem, 80 px, upande mpana zaidi. Mjaribu anathibitisha kwamba sasa kinasomeka vizuri, na kichwa bado kinapanuka.
Orodha fupi ya kukagua
Kabla ya kubadilisha
Chagua upana unaokujali, kutoka kwenye zana za msanidi programu au kutoka orodha yako ya vifaa lengwa.
Wakati wa kubadilisha
Andika thamani ya vw na kila upana kwa zamu, na uandike pikseli zinazoonyeshwa kando ya msingi.
Baada ya kubadilisha
Tazama ncha zote. Kama ukubwa ni mdogo mno au mkubwa mno upande wowote, ongeza mipaka kwa clamp().
Makosa ya kawaida
Kudhani jibu moja
Thamani ya vw ina ukubwa tofauti wa pikseli kwa kila upana. Toa upana pamoja na kila takwimu.
Kusahau upau wa kusogeza
100vw unaujumuisha, kwa hiyo kisanduku cha upana kamili kinaweza kufurika.
Kupima maandishi ya mwili kwa vw pekee
Hayawezi kukuzwa. Ongeza kipengele cha rem na mipaka.
Nambari zako hubaki kwenye kifaa chako
Hesabu hufanyika kwenye kifaa. Thamani zako hutumiwa na kivinjari chako mwenyewe na hakuna kinachotumwa popote. Hakuna cha kufuta baadaye na hakuna akaunti ya kuunda. Hiyo ndiyo njia rahisi ya kubadilisha vw kuwa px.
Muhtasari
Ili kubadilisha vw kuwa px hapa, andika ukubwa kwa vw na upana wa dirisha, na usome matokeo kwa pikseli mara moja, ukitumia fomula px = vw × width ÷ 100. Upana huanza kwa 1440 px, upana ambao michoro mara nyingi huchorwa, lakini ni mazoea na si kiwango, kwa hiyo andika wako mwenyewe. Ubadilishaji huhifadhi sehemu ya skrini: vw moja ni moja kwa mia ya upana wa kiona, kwa hiyo ukubwa wa vw hukua na kupungua pamoja na dirisha. Tofauti na rem, vw haina kielelezo cha msingi, kwa kuwa kiona ni upana wowote wa dirisha la msomaji. Kwa maandishi, changanya vw na rem ndani ya clamp(), ili yaendelee kusomeka na kukuzika. Hakuna kinachopakiwa.