Conversie vw în px Viewport width ↔ Pixels Gratuit Online Sigur
Scrieți o valoare în vw și o citiți pe loc în px. Socoteala se face în browserul dumneavoastră, nu se trimite nimic nicăieri, iar de ce depinde rezultatul scrie mai jos, nu se presupune.
Nu se încarcă nimic
Mărimi obișnuite — Conversie vw în px
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
De unde vin aceste unități
Pixelul din CSS nu e pixelul din ecranul dumneavoastră. Când afișajele au încetat să mai aibă o densitate previzibilă, o pagină măsurată în pixeli adevărați a devenit o pagină care se micșora pe măsură ce ecranele se ascuțeau, așa că pixelul CSS a fost redefinit ca o lungime de referință: cam 1/96 dintr-un țol, văzut de la o distanță comodă de citit. Tot restul paginii se clădește pe asta. Em-ul e mai vechi decât web-ul — la literele de plumb era lățimea unui bloc turnat, numit după majuscula M — iar în CSS înseamnă mărimea fontului în vigoare, și de aceea se schimbă pe măsură ce îmbricați elementele. Rem-ul a fost adăugat tocmai ca să scape de asta: e em-ul elementului rădăcină și nu se compune niciodată. Vw-ul a venit odată cu designul adaptiv: a suta parte din lățimea ferestrei, oricât ar fi ea.
Unde le întâlniți
Astea sunt unitățile oricărei foi de stil. Pixelii dau mărimea chenarelor, a umbrelor și a orice nu trebuie să scaleze; rem-ul dă mărimea literei, a spațierii și a așezării, așa încât o singură schimbare la rădăcină redimensionează o interfață întreagă; em-ul dă mărimea lucrurilor care trebuie să urmeze propriul lor text, cum e spațiul dinăuntrul unui buton; vw-ul dă mărimea titlurilor și a secțiunilor de deschidere care trebuie să umple ecranul pe orice dispozitiv. Conversia dintre ele e aritmetica zilnică a transformării unui design predat în pixeli într-o foaie de stil care scalează.
Întrebări frecvente
De ce 16 px e punctul obișnuit de plecare?
Fiindcă aceasta e mărimea implicită a textului în orice browser important, iar o foaie de stil care n-o suprascrie o moștenește. Un rem înseamnă deci 16 px la setarea implicită, și de aici vin conversiile cu care sunteți obișnuiți: 0,5 rem înseamnă 8 px, 1,5 rem înseamnă 24 px. Dacă un utilizator a mărit valoarea implicită din setările browserului, aceleași valori în rem cresc odată cu ea — ceea ce e exact rostul folosirii lor.
Să folosesc rem sau em?
Rem pentru tot ce trebuie să urmeze pagina ca întreg — scara literei, spațierea, lățimile de așezare — fiindcă se măsoară de la rădăcină și nu se adună niciodată. Em pentru tot ce trebuie să urmeze textul în care stă: spațiul interior al unui buton, distanța de lângă o pictogramă, retragerea unui citat. Greșeala obișnuită e să îmbrici unul într-altul elemente măsurate în em, unde 1,2 em înăuntrul a 1,2 em devine 1,44, apoi 1,73, până când textul din josul paginii are de două ori mărimea plănuită.
Răspunsul este exact?
Acolo unde cele două unități se definesc una prin alta prin numere întregi, da — pagina o spune deasupra cifrei, iar singura rotunjire e în câte zecimale se arată. Acolo unde raportul nu are zecimală finită, pagina scrie douăsprezece cifre semnificative și spune că relația e aproximativă, în loc să se prefacă.
Pleacă de pe dispozitivul meu ceva din ce scriu?
Nu. Socoteala se face în browserul dumneavoastră; nu se încarcă nimic și nici n-are unde. Odată deschisă pagina, funcționează și cu internetul oprit.
De ce convertiți vw în px
O foaie de stiluri spune font-size: 5.2vw pe un titlu principal, margin-top: 8vw pe o secțiune și width: 42vw pe o imagine. Sunt valori flexibile și nu vă spun ce se află pe ecran. Cât de mare este titlul pe un telefon? Cât de lată este imaginea pe un laptop? Arată marginea bine la 1920 de pixeli? Ca să aflați, convertiți vw în px: înmulțiți numărul cu lățimea ferestrei și împărțiți la o sută, apoi citiți răspunsul în unitatea pe care o folosesc designerii, testerii și clienții. Este ceea ce faceți când revizuiți cod fluid, verificați o construcție față de o machetă sau explicați unui coleg de ce titlul pare mic pe un ecran îngust.
Ce face conversia diferită de rem sau em este că multiplicatorul este fereastra însăși. Un vw este o sutime din lățimea ferestrei de afișare, deci 5,2vw înseamnă 52 px într-o fereastră lată de 1000 px, 18,7 px pe un telefon lat de 360 px și 99,8 px pe un monitor larg de 1920. Nu există o valoare implicită la care să reveniți, iar lățimea se schimbă când cititorul rotește telefonul sau trage de fereastră. Convertorul cere deci lățimea, o arată lângă răspuns și pornește de la 1440 px, o lățime la care se desenează adesea machetele.
Calculul se face în browserul dumneavoastră, iar nimic nu este încărcat. Mai jos găsiți formula, ce păstrează și ce nu poate păstra conversia, cum se citește o foaie de stiluri fluidă la mai multe lățimi, capcana barei de derulare, problema de accesibilitate a textului în vw pur și câteva obiceiuri care păstrează codul fluid ușor de înțeles.
Formula și lățimea
px este egal cu vw înmulțit cu lățimea, împărțit la o sută
Formula este px = vw × width ÷ 100. La o lățime de 1440 px, 10 vw devin 144 px, 5 vw devin 72 px și 1,667 vw devin 24 px. Pagina tipărește lățimea lângă rezultat, deci o linie precum 10 vw = 144 px (1440 px) vă spune ce s-a presupus. Ca să vedeți alt ecran, schimbați lățimea și citiți din nou rezultatul.
Ce lățimi să încercați
Un set util de verificat este 360 sau 390 pentru telefoane, 768 pentru o tabletă în mod portret, 1024 pentru un laptop mic, 1440 pentru un laptop sau desktop obișnuit și 1920 pentru un monitor full-HD. Scrieți fiecare în câmpul de lățime și notați rezultatul. Cinci citiri vă arată întreaga plajă a unei valori, iar orice extremă iese în evidență.
Folosirea lățimii ferestrei reale
În instrumentele pentru dezvoltatori ale browserului, bara de dispozitive arată lățimea ferestrei în pixeli. Folosiți acel număr pentru a compara ce face pagina cu ce spune convertorul. Dacă se potrivesc, citirea dumneavoastră a foii de stiluri este corectă.
Ce păstrează conversia și ce nu poate
Păstrează partea din ecran
Un vw este o sutime din lățimea ferestrei de afișare, deci o dimensiune scrisă în vw crește și scade odată cu fereastra, în loc să rămână pe loc. Valoarea în pixeli pe care o obțineți este acea parte făcută concretă pentru o anumită lățime.
Nu poate da o valoare implicită
Spre deosebire de rem, vw nu are o valoare implicită. Un browser dă rădăcinii o dimensiune a fontului de 16 px când nimeni nu spune altfel, deci o pagină în rem poate porni de la un număr real; lățimea ferestrei de afișare este pur și simplu cât de lată este fereastra cititorului și se schimbă când acesta întoarce telefonul. Cei 1440 px de aici sunt o lățime la care se desenează adesea machetele, un obicei și nu un standard. Scrieți-o pe a dumneavoastră.
Rotunjirea
Înmulțirea cu lățimea și împărțirea la 100 pot produce zecimale. 6,67 vw la 1440 px este 96,048 px. Browserele se descurcă cu pixeli fracționari, dar dacă aveți nevoie de un număr întreg pentru un fișier de design, rotunjiți și notați că rotunjirea vă aparține.
Citirea unei foi de stiluri fluide
Luați trei lățimi și scrieți rezultatele
Alegeți o lățime îngustă, una de mijloc și una largă, de exemplu 375, 1024 și 1920. Pentru fiecare valoare vw importantă din foaia de stiluri, convertiți vw în px la fiecare lățime și scrieți cele trei numere într-o notă. Un titlu de 5,2 vw dă 19,5, 53,2 și 99,8 pixeli. Privit așa, știți dacă titlul se citește bine la capătul îngust și nu este copleșitor la capătul larg.
Căutați clamp
Codul fluid bine scris pune limite în jurul lui vw cu clamp(min, preferred, max). Dacă vedeți clamp(2rem, 1rem + 4vw, 6rem), dimensiunea crește între 32 și 96 px și se oprește la ambele capete. Când convertiți partea vw, țineți minte că este doar mijlocul intervalului, iar limitele hotărăsc ce se întâmplă la margini.
Verificați extremele
Lățimile riscante sunt cea mai mică și cea mai mare. La 320 px un titlu de 6 vw are 19 px; la 2560 are 154 px. Dacă niciuna nu arată acceptabil și nu există clamp, foaia de stiluri are nevoie de limite.
Capcane când convertiți vw în px
Bara de derulare
În browserele desktop, lățimea ferestrei de afișare folosită pentru vw include lățimea barei verticale de derulare. Astfel 100vw este puțin mai lat decât zona vizibilă când pagina se derulează, cu aproximativ 15 până la 17 pixeli pe multe sisteme. Valoarea în pixeli pe care o calculați este deci ceva mai mare decât lățimea vizibilă pe care pare s-o reprezinte. Pe telefoane, unde barele de derulare se suprapun peste pagină, efectul lipsește.
Folosirea lățimii greșite
Rezultatul este corect doar cât este lățimea pe care o scrieți. Dacă fereastra dumneavoastră de test are 1366 px lățime și convertiți la 1440, fiecare valoare este greșită cu aproximativ cinci la sută. Citiți lățimea reală din instrumentele pentru dezvoltatori.
Confuzia dintre vw și procent
O lățime de 50% se referă la lățimea părintelui, în timp ce 50vw se referă la fereastră. Într-un container îngust cele două sunt foarte diferite. Convertorul dă răspunsul vw; dacă elementul dumneavoastră este într-un container, părintele poate fi mai îngust decât fereastra.
Uitarea că textul în vw nu poate fi mărit
Textul dimensionat doar în vw nu reacționează când cititorul mărește pagina, pentru că fereastra și textul se scalează împreună. Ghidurile de accesibilitate cer ca textul să poată fi redimensionat. Adăugați un termen în rem, ca în clamp(), pentru ca textul să reacționeze și la mărire.
Întrebări pe care și le pun oamenii înainte de conversie
Câți pixeli are 1 vw?
O sutime din lățimea ferestrei: 14,4 px la 1440, 10 px la 1000, 3,6 px la 360.
Câți pixeli are 50 vw?
Jumătate din fereastră: 720 px la o lățime de 1440, 500 px la o lățime de 1000.
De ce este pagina mea mai lată decât ecranul?
O casetă de 100vw pe o pagină care se derulează este mai lată decât zona vizibilă pentru că bara de derulare este numărată. Folosiți în schimb 100% în interiorul unui container.
Este vw același lucru cu procentul?
Nu. Procentul se referă la părinte, vw la fereastră.
Se încarcă numărul meu?
Nu. Aritmetica rulează în browserul dumneavoastră și nimic nu este trimis nicăieri.
Cum mă întorc?
Cu px în vw, care împarte la lățime în loc să înmulțească.
Valori obișnuite la lățimi obișnuite
Un tabel mental
Ajută să cunoașteți câteva repere ca să puteți estima înainte să folosiți convertorul. La o lățime de 1000 px, 1 vw este 10 px, ceea ce face aritmetica banală: 2,5 vw sunt 25 px, 8 vw sunt 80 px. La 1440 px, 1 vw este 14,4 px. La 375 px, 1 vw este 3,75 px, deci un titlu de 8 vw are 30 px. Când convertiți vw în px pentru o verificare rapidă, porniți de la unul dintre aceste repere și scalați.
Trei lățimi, o foaie de stiluri
Luați un card cu lățimea de 80vw, un spațiu de 4vw și un titlu de 6vw. Pe un telefon de 375 px ajung la 300 px, 15 px și 22,5 px. Pe o tabletă de 768 px, la 614 px, 30,7 px și 46 px. Pe un desktop de 1440 px, la 1152 px, 57,6 px și 86,4 px. Dacă le vedeți pe toate trei alăturate, aflați dintr-odată că cardul este mult prea lat pe desktop și titlul mult prea mare și că probabil vreți o lățime maximă și un clamp.
Dincolo de fereastra de afișare
Unități de container
CSS-ul mai nou oferă unități relative la un container în loc de fereastră, cum ar fi cqw, care este o sutime din lățimea containerului. Ele rezolvă problema că o componentă pusă într-o bară laterală îngustă se comportă ca și cum ar avea toată fereastra. Dacă le folosiți, aritmetica este aceeași ca pentru vw, cu lățimea containerului ca bază, și puteți folosi acest convertor scriind acea lățime.
Ferestre de afișare mici, mari și dinamice
Pe telefoane, zona vizibilă se schimbă pe măsură ce bara de adrese se retrage. Pentru înălțimi, unitățile mai noi svh, lvh și dvh descriu fereastra de afișare mică, mare și dinamică. Pentru lățimi situația este mai simplă, pentru că bara de adrese nu o afectează, iar vw este stabil. Este încă un motiv pentru care vw este o unitate mai sigură decât vh pentru designul fluid pe mobil.
Procent, vw și grila
Lățimile în procente urmează părintele, vw urmează fereastra, iar grila CSS și flexbox urmează spațiul disponibil. Adesea cele mai bune machete fluide folosesc grila și procentele pentru structură și vw doar pentru text și spațiere, pentru că acelea sunt lucrurile care câștigă urmând direct ecranul. Când convertiți vw în px ca să verificați o machetă, întrebați-vă dacă o pistă de grilă ar fi spus același lucru mai robust.
Explicarea lui vw celor care nu scriu CSS
Folosiți fereastra drept riglă
Clienții și colegii înțeleg de obicei ideea odată ce spuneți că un vw este un procent din lățimea ecranului. Un titlu de 5 vw este lat cât cinci procente din ecran. Apoi arătați-le două numere: cât înseamnă pe propriul telefon și pe monitorul mare din sala de ședințe. Când convertiți vw în px pentru ambele lățimi și rostiți rezultatele cu voce tare, ideea unei dimensiuni care se mișcă odată cu ecranul devine concretă.
Spuneți de ce designul nu este fix
Părțile interesate fără pregătire tehnică întreabă uneori de ce pagina nu are pur și simplu o singură dimensiune pentru titlu. Răspunsul este că ecranele diferă cu un factor de șapte sau opt între cel mai mic telefon și cel mai mare monitor, iar o dimensiune fixă care se potrivește unuia este greșită pentru celălalt. Unitățile fluide sunt răspunsul, iar cifrele în pixeli de pe această pagină arată cât de mult schimbă ecranul aceeași valoare.
De unde vin aceste unități
Pixelul CSS
Când ecranele au încetat să aibă o densitate previzibilă, o pagină măsurată în pixeli reali a devenit o pagină care se micșora pe măsură ce ecranele se înmulțeau în claritate. Așa că pixelul CSS a fost redefinit ca o lungime de referință: aproximativ 1/96 dintr-un inch văzut la o distanță confortabilă de citire. Este unitatea în care această pagină își dă răspunsurile.
Unitățile ferestrei de afișare
Vw a apărut odată cu designul responsiv: o sutime din lățimea ferestrei de afișare, oricare ar fi aceasta. Stă lângă rem, relativ la dimensiunea fontului rădăcinii, și em, relativ la element. Ca să vedeți cum arată aceeași valoare în pixeli în acele unități, convertiți rem în px și comparați.
Obiceiuri care păstrează codul fluid ușor de înțeles
Comentați valorile în pixeli
O linie precum font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ costă câteva cuvinte și îi scutește pe următorii cititori de mai multe conversii.
Păstrați lățimea de design într-un singur loc
Dacă proiectul dumneavoastră are o proprietate personalizată pentru lățimea la care a fost desenat designul, fiecare valoare vw poate fi legată de ea. Când convertiți vw în px pentru o revizuire, știți ce lățime să folosiți.
Folosiți vw cu măsură
O listă scurtă de valori vw este ușor de înțeles. O foaie de stiluri în care totul este în vw nu este. Păstrați-l pentru text de afișare, spații mari și grafică.
Testați pe dispozitive reale când contează
Instrumentele browserului simulează bine lățimile, dar un telefon real arată comportamentul adevărat al barelor de adrese, al rotirii și al măririi. O verificare de cinci minute pe un dispozitiv prinde ce scapă unei simulări.
Convertoare înrudite
Aceeași familie de instrumente acoperă conversiile învecinate. Ca să vă întoarceți la vw, folosiți px în vw. Pentru dimensiuni relative la rădăcină există px în rem și rem în px, iar pentru dimensiuni relative la element, px în em și em în px. Pentru culorile aceleiași foi de stiluri, HEX în RGB și RGB în HEX se ocupă de notații.
Un exemplu rezolvat
Să presupunem că un tester raportează că titlul principal se citește greu pe un telefon mic. Foaia de stiluri spune font-size: 5.2vw fără limite. Convertiți vw în px la 360 și citiți 18,7 px, la 768 citiți 39,9 px, la 1440 citiți 74,9 px. La capătul îngust titlul este puțin mai mare decât textul de corp și nu se mai citește ca un titlu. Sugerați clamp(2rem, 1rem + 4vw, 5rem), care dă 32 px la cea mai mică lățime, aproximativ 51 px la 768 și 5rem, adică 80 px, la cea mai mare. Testerul confirmă că acum se citește bine, iar titlul se scalează în continuare.
O scurtă listă de verificare
Înainte de conversie
Alegeți lățimile care vă interesează, din instrumentele pentru dezvoltatori sau din lista dumneavoastră de dispozitive țintă.
În timpul conversiei
Scrieți valoarea vw și fiecare lățime pe rând și notați pixelii arătați lângă bază.
După conversie
Priviți extremele. Dacă o dimensiune este prea mică sau prea mare la oricare capăt, adăugați limite cu clamp().
Greșeli frecvente
Presupunerea unui singur răspuns
O valoare vw are o altă mărime în pixeli la fiecare lățime. Dați lățimea împreună cu fiecare cifră.
Uitarea barei de derulare
100vw o include, deci o casetă pe toată lățimea poate depăși.
Dimensionarea textului de corp doar în vw
Nu poate fi mărit. Adăugați un termen în rem și limite.
Numerele dumneavoastră rămân pe dispozitivul dumneavoastră
Calculul se face local. Valorile dumneavoastră sunt folosite de propriul browser și nimic nu este trimis nicăieri. Nu e nimic de șters după aceea și niciun cont de creat. Aceasta este calea simplă de a converti vw în px.
Rezumat
Ca să convertiți vw în px aici, scrieți dimensiunea în vw și lățimea ferestrei și citiți imediat rezultatul în pixeli, cu formula px = vw × width ÷ 100. Lățimea pornește de la 1440 px, o lățime la care se desenează adesea machetele, dar este un obicei și nu un standard, așa că scrieți-o pe a dumneavoastră. Conversia păstrează partea din ecran: un vw este o sutime din lățimea ferestrei de afișare, deci o dimensiune în vw crește și scade odată cu fereastra. Spre deosebire de rem, vw nu are o valoare implicită, pentru că fereastra de afișare este cât de lată este fereastra cititorului. Pentru text, combinați vw cu rem în clamp(), ca să rămână lizibil și mărit. Nimic nu este încărcat.