I-convert ang px sa vw Pixels ↔ Viewport width Libre Online Ligtas

Bakit mo kino-convert ang px sa vw

Nagpapadala ang isang designer ng mockup na iginuhit sa lapad na 1440 px, na may hero heading na 96 px at agwat ng seksyon na 72 px. Sa totoong web, makikita ang pahina sa 360 px sa telepono, 820 px sa tablet at 2560 px sa malaking monitor, at gusto ng designer na mapanatili ng heading ang proporsyon nito sa screen sa bawat isa. Ang yunit na ginawa para roon ay ang lapad ng viewport, ang vw, at ang paraan para makarating doon mula sa mockup ay ang pag-convert ng px sa vw: kukunin mo ang halaga sa pixel, hahatiin sa lapad kung saan iginuhit ang disenyo, at imu-multiply sa isandaan. Ang heading na 96 px sa canvas na 1440 px ay 6.67 vw, at mula noon ay palagi itong 6.67 porsiyento ng anumang laki ng screen.

Iyon ang pangako ng yunit ng viewport, at panganib din nito. Nagsisimula ang rem at em sa laki ng font, na itinatakda ng browser sa makatwirang default. Walang default ang vw: ang lapad ng viewport ay kung gaano lang kalapad ang bintana ng mambabasa, at nagbabago ito kapag iniikot nila ang telepono o hinihila ang bintana. Kaya hindi itinatago ng converter ang nag-iisang numerong pinagbabatayan ng sagot. Nasa isang field ang lapad ng disenyo, na nagsisimula sa 1440 px, at maaari mo itong baguhin para tumugma sa mockup mo.

Tumatakbo sa iyong browser ang aritmetika at walang ina-upload. Sa ibaba makikita mo ang formula, ang pinananatili at hindi kayang panatilihin ng conversion, kung saan nakakatulong at kung saan nakakasama ang mga yunit ng viewport, ang problema sa accessibility na nililikha ng tekstong purong vw, ang teknik na clamp na umaayos nito, at isang paraan ng pagbabago ng mockup na pixel tungo sa fluid na stylesheet.

Ang formula at ang lapad

Ang vw ay katumbas ng px na hinati sa lapad, imu-multiply sa isandaan

Ang formula ay vw = px ÷ lapad × 100. Sa lapad ng disenyo na 1440 px, ang sukat na 144 px ay nagiging 10 vw, ang 72 px ay nagiging 5 vw at ang 24 px ay nagiging 1.667 vw. Ipinapakita ng pahina ang lapad sa tabi ng resulta, tulad ng sa 144 px = 10 vw (1440 px), para makita mo kung ano ang ipinalagay. Ang isang vw ay isang sandaang bahagi ng lapad ng viewport, kaya sa bintanang 1000 px ang lapad, ang 1 vw ay katumbas ng 10 px.

Saan nagmula ang 1440

Ang 1440 px dito ay lapad na madalas pagguhitan ng mga disenyo, isang gawi at hindi pamantayan. Gumuguhit ang ilang pangkat sa 1280, marami sa 1920, at ang mga disenyo para sa mobile sa 375 o 390. Walang tamang sagot, tanging ang lapad lang na ginagamit ng design file mo. I-type ang sarili mo: kasing-husay lang ng lapad na ibibigay mo ang conversion.

Paggamit ng sariling lapad ng disenyo

Kung iginuhit ang mockup sa 1920 px, i-type ang 1920, at ang parehong heading na 96 px ay nagiging 5 vw. Kung kino-convert mo ang px sa vw gamit ang maling lapad, magiging tama ang itsura ng pahina sa isang laki ng screen at mali sa lahat ng iba, na nakalilitong bug kapag hindi mo alam na hanapin ito.

Ang pinananatili ng conversion at ang hindi nito kaya

Pinananatili nito ang bahagi ng screen

Ang isang vw ay isang sandaang bahagi ng lapad ng viewport, kaya ang sukat na nakasulat sa vw ay lumalaki at lumiliit kasama ng bintana sa halip na manatili sa isang lugar. Ang resulta ay ang bahagi ng screen na sinakop ng halaga sa pixel sa mockup mo, at sa browser ay pinananatili ng elemento ang bahaging iyon sa bawat lapad.

Hindi ito makapagbibigay ng default

Hindi tulad ng rem, walang default ang vw. Binibigyan ng browser ang laki ng font ng root ng 16 px kapag walang nagsabi ng iba, kaya makakapagsimula ang pahinang rem sa totoong numero; ang lapad ng viewport ay kung gaano lang kalapad ang bintana ng mambabasa, at nagbabago ito kapag inikot nila ang telepono. Ang lapad sa field ay ang lapad ng disenyo mo, at tama ang sagot para sa screen na ganoon ang lapad at proporsyonal saanman.

Pag-round

Ang paghahati sa 1440 ay nagbubunga ng mahahabang decimal para sa karamihan ng sukat. Maayos sa stylesheet ang halagang tulad ng 6.6667 vw, pero maaari kang mag-round sa 6.67 o 6.7 nang walang nakikitang pagbabago. Magtago ng dalawa o tatlong digit pagkatapos ng tuldok; ingay ang higit pa.

Kung saan nakakatulong ang mga yunit ng viewport

Mga hero heading at malaking display type

Ang heading na dapat pumuno sa isang bahagi ng screen sa bawat device ang klasikong gamit. Sa lapad ng telepono, aapaw ang nakapirming heading na 96 px; sa vw, lumiliit ito kasama ng screen at nananatili sa iisang linya.

Mga seksyong full-bleed

Madalas pinakamaganda ang espasyo sa pagitan ng malalaking seksyon ng landing page kapag nagsa-scale ito kasama ng screen, para mapanatili ng pahina ang ritmo nito sa maliit na laptop at sa malapad na display. Nagagawa iyon ng mga agwat sa vw.

Artwork na dapat mapanatili ang hugis

Ang mga hero image, ilustrasyon at pandekorasyong hugis na may sukat sa vw ay nagpapanatili ng proporsyon nila sa bintana, kaya hindi nagkakawatak-watak ang komposisyon habang nagbabago ang screen.

Fluid na type na may mga limitasyon

Kapag isinama sa clamp(), nagbibigay ang vw ng type na maayos na lumalaki sa pagitan ng pinakamababa at pinakamataas. Ito ang teknik na ginagamit ng makabagong stylesheet para sa mga heading, at tatalakayin ito sa ibaba.

Kung saan nakakasama ang mga yunit ng viewport

Teksto ng katawan sa purong vw

Hindi tumutugon ang tekstong may sukat lang sa vw kapag nag-zoom in ang mambabasa sa pahina sa browser, dahil binabago ng pag-zoom ang sukat sa pixel ng bintana pero pinananatili ng sukat sa vw ang bahagi nito. Ang mga taong umaasa sa zoom, madalas dahil sa mahinang paningin, ay naiiwan sa tekstong hindi nila mapalaki. Hinihiling ng mga alituntunin sa accessibility na mabago ang laki ng teksto, at bumabagsak sa pagsusulit na iyon ang purong sukat sa vw.

Maliliit at napakalaking sukdulan

Sa lapad na 320 px, ang heading na 6.67 vw ay 21 px, na maaaring masyadong maliit. Sa lapad na 2560 px, ito ay 171 px, na napakalaki. Kung walang mga limitasyon, ang proporsyong mukhang tama sa 1440 ay maaaring walang katuturan sa mga gilid.

Ang scrollbar

Sa mga desktop browser, kasama ang lapad ng patayong scrollbar sa lapad ng viewport na ginagamit para sa vw. Kaya ang kahon na nakatakda sa 100vw ay bahagyang mas malapad kaysa sa nakikitang lugar kapag nag-i-scroll ang pahina, at maaaring lumitaw ang pahalang na scrollbar. Alamin ito bago bumuo ng full-width na layout mula sa vw.

Ang teknik na clamp

Pagtatakda ng sahig at kisame

Ang CSS function na clamp(min, preferred, max) ay kumukuha ng pinakamababa, piniling halaga at pinakamataas. Para sa type, isulat ang pinakamababa at pinakamataas sa rem, at ang piniling halaga sa vw kasama ang terminong rem: font-size: clamp(2rem, 1rem + 4vw, 6rem). Lumalaki ang sukat kasama ng bintana sa pagitan ng 32 at 96 px at hindi kailanman lumalampas sa alinmang dulo. Dahil nasa rem ang bahagi nito, iginagalang pa rin ng teksto ang mga setting ng mambabasa.

Paano buuin ang gitnang termino

Pumili ng dalawang lapad ng screen at ang mga sukat na gusto mo sa bawat isa. Halimbawa, 32 px sa lapad na 360 px at 96 px sa lapad na 1440 px. Ang slope ay (96 − 32) ÷ (1440 − 360) = 0.0593 px kada px ng lapad, na 5.93 vw, at ang intercept ay 32 − 0.0593 × 360 = 10.67 px, halos 0.667 rem. Ang piniling termino ay samakatuwid 0.667rem + 5.93vw. Tinutulungan ka ng converter sa bahaging vw, at ang isang minutong aritmetika ang gagawa sa iba.

Bakit ito ang tamang balanse

Sa clamp, nakukuha mo ang fluid na pag-uugaling gusto ng mga designer at ang accessibility na kailangan ng mga mambabasa. Ito ang sagot sa problemang inilarawan sa itaas, at ang dahilan kung bakit ginagamit lang ng karamihan sa makabagong stylesheet ang vw sa loob ng clamp.

Paano i-convert ang px sa vw dito

I-type ang halaga sa pixel

Ilagay ang sukat sa pixel sa unang field. Tinatanggap ang mga decimal.

Itakda ang lapad ng disenyo

Iwanan ito sa 1440 kung iyon ang lapad ng mockup mo. Baguhin ito kung hindi. Nag-a-update ang resulta habang nagta-type ka.

Kopyahin ang halaga sa vw

Gamitin ang bilang sa CSS mo kasama ang yunit nito, tulad ng sa font-size: 6.67vw. Para sa teksto, ilagay ito sa loob ng clamp() kasama ang mga limitasyon sa rem.

Saan nagmula ang mga yunit na ito

Ang CSS pixel

Nang hindi na mahulaan ang density ng mga display, ang pahinang sinusukat sa totoong pixel ay naging pahinang lumiliit habang lumilinaw ang mga screen. Kaya muling binigyang-kahulugan ang CSS pixel bilang sanggunian na haba: halos 1/96 ng isang pulgada na nakikita sa komportableng distansya ng pagbabasa. Ito ang yunit kung saan iginuhit ang mockup mo.

Ang mga yunit ng viewport

Dumating ang vw kasama ng responsive na disenyo: isang sandaang bahagi ng lapad ng viewport, anuman iyon. Nasa tabi ito ng rem, na relatibo sa laki ng font ng root, at ng em, na relatibo sa elemento. Kung kailangan mo ng mga sukat na relatibo sa teksto sa halip na sa screen, i-convert ang px sa rem.

Mga bitag kapag kino-convert ang px sa vw

Paggamit ng maling lapad ng disenyo

Ang pinakakaraniwang pagkakamali. Kung 1920 ang lapad ng mockup mo at nag-convert ka gamit ang 1440, mali ng isang-katlo ang bawat sukat. Kumpirmahin ang lapad ng frame sa design tool mo.

Paglimot sa disenyo para sa mobile

Maraming pangkat ang may dalawang mockup, isa para sa desktop at isa para sa telepono. Ang heading na 96 px sa una at 40 px sa pangalawa ay hindi iisang halaga sa vw. Gumamit ng dalawang lapad, dalawang conversion at isang clamp para pagdugtungin ang mga ito.

Paglalagay ng buong pahina sa vw

Ang pahinang nagsa-scale ang lahat kasama ng bintana ay nawawalan ng ginhawa sa pagbabasa: masyadong humahaba ang mga linya sa malalapad na screen at masyadong lumiliit ang teksto sa makikitid. Gamitin ang vw para sa ilang bagay na dapat mag-scale, at nakapirming sukat o rem para sa iba.

Pagbalewala sa problema ng zoom

Subukan ang pahina mo na naka-zoom ang browser sa 200 porsiyento. Kung hindi lumaki ang teksto, kailangan ng terminong rem ang mga sukat.

Mga tanong ng mga tao bago mag-convert

Ilang vw ang 100 px?

Sa lapad ng disenyo na 1440 px, halos 6.94 vw.

Ano ang pinakamahusay na lapad ng disenyo na gagamitin?

Iyong pinagguhitan ng mockup mo. Walang pandaigdigang default.

Mas mabuti ba ang vw kaysa sa rem?

Magkaiba ang trabaho nila. Sumusunod ang rem sa laki ng teksto ng mambabasa; sumusunod ang vw sa bintana. Gamitin ang bawat isa para sa kung saan ito mahusay.

Puwede ko bang gamitin ang vw para sa laki ng font?

Oo, pero ilagay ito sa loob ng clamp() na may mga limitasyon sa rem, para manatiling nababasa ang teksto at ma-zoom pa rin.

Ina-upload ba ang numero ko?

Hindi. Tumatakbo sa iyong browser ang aritmetika at walang ipinapadala saanman.

Paano ako babalik?

Gamit ang vw sa px, na nagmu-multiply sa lapad sa halip na naghahati.

Pagpili nang matalino kapag kino-convert ang px sa vw

Magpasya kung ano ang dapat mag-scale kasama ng screen

Hero type, malalaking agwat at artwork: oo. Teksto ng katawan, mga border, maliliit na kontrol: hindi. Kung mas maikli ang listahan mo ng mga halaga sa vw, mas matibay ang pahina.

Mag-convert sa yugto ng disenyo

Kung kino-convert mo ang px sa vw habang binabasa ang mockup, makikita mo agad kung aling mga halaga ang lumalabas na kakaiba at makakahiling ka sa designer ng mas maayos. Ang heading na lumabas na 6.6667 vw ay nag-aanyaya ng usapan tungkol sa paggawa nitong 6.5 o 7.

Magtago ng tala ng lapad

Isulat ang lapad ng disenyo sa komento sa itaas ng stylesheet, para gamitin ng sinumang mag-convert sa kalaunan ang parehong isa. Ang magkahalong lapad ay nagbubunga ng pahinang hindi pare-pareho sa paraang walang makapagpaliwanag nang husto.

Paggawa mula sa mockup tungo sa fluid na stylesheet

Ilista ang mga sukat na dapat mag-scale

Buksan ang design file at isulat ang bawat sukat na gusto mong sumunod sa screen: ang pamagat ng hero, ang mga agwat ng seksyon, marahil isang malaking ilustrasyon. Para sa bawat isa, i-convert ang px sa vw laban sa lapad ng frame, at itala ang resulta. Karamihan ng mga pahina ay nagtatapos na may wala pang sampung ganitong halaga, at nananatili sa rem o pixel ang lahat ng iba.

Suriin nang hiwalay ang frame ng mobile

Kung may mockup para sa telepono, basahin ang parehong mga elemento sa lapad nito. Ang pamagat na 96 px sa frame na 1440 px at 40 px sa frame na 375 px ay hindi tumutugma sa iisang halaga sa vw, na hudyat na gumamit ng clamp: ang sukat sa telepono ang nagiging sahig, ang sukat sa desktop ang kisame, at ang terminong vw ang gumagawa ng trabaho sa pagitan. Kapag kino-convert mo ang px sa vw para sa bawat frame, binibigyang-kahulugan ng dalawang numero ang slope.

Suriin sa tatlong lapad

Tingnan ang natapos na pahina sa halos 360, 820 at 1440 pixel, at minsan sa 2560. Madaling gawing tama ang mga fluid na layout sa lapad ng mockup at bahagyang mali sa iba, at ang maikling pagdaan sa mga lapad na ito ay nakakahanap ng karamihan sa mga problema bago pa ang bisita.

Ilayo ang yunit sa mahabang teksto

Pinakamainam na sukatin sa rem ang mga linya ng tekstong binabasa, at bigyan ng pinakamataas na haba ng linya na mga 60 hanggang 75 karakter. Gamitin ang yunit ng viewport para sa display type at espasyo, at hayaang matatag ang tekstong binabasa.

Mga kaugnay na converter

Sinasaklaw ng parehong pamilya ng mga tool ang mga katabing conversion. Para bumalik sa mga pixel, gamitin ang vw sa px. Para sa mga sukat na relatibo sa root, mayroong px sa rem at rem sa px, at para sa mga sukat na relatibo sa elemento, px sa em at em sa px. Para sa mga kulay ng parehong stylesheet, hinahawakan ng HEX sa RGB at HEX sa HSL ang mga notasyon.

Isang halimbawang gawa

Sabihin nating dinisenyo ang isang landing page sa 1440 px, na may pamagat ng hero na 96 px at agwat na 72 px sa itaas nito. I-type mo ang 96 at mababasa mo ang 6.667 vw, i-type ang 72 at mababasa ang 5 vw. Sa bintanang 1000 px, ang pamagat ay 66.7 px at ang agwat ay 50 px, nang proporsyonal. Pero sa telepono na 360 px ang lapad, ang pamagat ay magiging 24 px, na mas maliit kaysa sa gusto mo, kaya isusulat mo ang pamagat bilang clamp(2.25rem, 1rem + 5vw, 6rem), na nagbibigay ng sahig na 36 px at kisame na 96 px, at nananatili itong nababasa at ma-zoom. Ang agwat, na walang teksto, ay nananatili sa payak na vw.

Maikling checklist

Bago mag-convert

Hanapin ang lapad ng mockup. Magpasya kung aling mga sukat ang dapat mag-scale at alin ang hindi.

Habang nagko-convert

I-type ang halaga sa pixel at ang lapad ng disenyo, at kopyahin ang bilang sa vw kasama ang yunit nito.

Pagkatapos mag-convert

Baguhin ang laki ng bintana mula sa lapad ng telepono hanggang sa malapad na monitor, at i-zoom ang pahina sa 200 porsiyento. Magdagdag ng mga limitasyon gamit ang clamp() saanman mukhang mali ang mga sukdulan.

Karaniwang mga pagkakamali

Pag-aakalang pamantayan ang 1440

Gawi lang ito. Gamitin ang sarili mong lapad.

Pagsusukat ng teksto ng katawan sa vw lamang

Hindi ito ma-zoom. Magdagdag ng terminong rem at mga limitasyon.

Paglimot sa scrollbar

Mas malapad ang 100vw kaysa sa nakikitang lugar sa mga desktop na pahinang nag-i-scroll.

Nananatili sa device mo ang mga numero mo

Nangyayari nang lokal ang kalkulasyon. Ginagamit ng sarili mong browser ang mga halaga mo at walang ipinapadala saanman. Walang buburahin pagkatapos at walang account na lilikhain. Iyon ang simpleng paraan para i-convert ang px sa vw.

Buod

Para i-convert ang px sa vw dito, i-type ang sukat sa pixel at ang lapad ng disenyo mo, at basahin agad ang resulta, gamit ang formula na vw = px ÷ lapad × 100. Nagsisimula ang lapad sa 1440 px, lapad na madalas pagguhitan ng mga disenyo, pero gawi lang ito at hindi pamantayan, kaya i-type ang sarili mo. Pinananatili ng conversion ang bahagi ng screen: ang isang vw ay isang sandaang bahagi ng lapad ng viewport, kaya ang sukat sa vw ay lumalaki at lumiliit kasama ng bintana. Hindi tulad ng rem, walang default ang vw, dahil ang viewport ay kung gaano lang kalapad ang bintana ng mambabasa. Para sa teksto, pagsamahin ang vw at rem sa loob ng clamp(), para manatili itong nababasa at ma-zoom. Walang ina-upload.