Conversie px în vw Pixels ↔ Viewport width Gratuit Online Sigur
Scrieți o valoare în px și o citiți pe loc în vw. 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 px în 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 |
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 px în vw
Un designer trimite o machetă desenată la 1440 px lățime, cu un titlu principal de 96 px și un spațiu între secțiuni de 72 px. Pe web-ul real pagina va fi văzută la 360 px pe un telefon, la 820 px pe o tabletă și la 2560 px pe un monitor mare, iar designerul ar vrea ca titlul să-și păstreze proporția față de ecran la fiecare dintre ele. Unitatea făcută pentru asta este lățimea ferestrei de afișare, vw, iar calea spre ea de la machetă este să convertiți px în vw: luați valoarea în pixeli, o împărțiți la lățimea la care a fost desenat designul și înmulțiți cu o sută. Un titlu de 96 px pe o pânză de 1440 px este 6,67 vw și de atunci înainte este mereu 6,67 la sută din oricât ar fi ecranul.
Aceasta este promisiunea unității ferestrei de afișare și, totodată, riscul ei. Rem și em pornesc de la o mărime de font, pe care un browser o setează la o valoare implicită rezonabilă. Vw nu are deloc o valoare implicită: lățimea ferestrei de afișare este pur și simplu cât de lată este fereastra cititorului și se schimbă când rotește telefonul sau trage de fereastră. De aceea convertorul nu ascunde singurul număr de care depinde răspunsul. Lățimea designului stă într-un câmp, pornind de la 1440 px, și o puteți schimba ca să se potrivească machetei dumneavoastră.
Aritmetica rulează în browserul dumneavoastră și nimic nu este încărcat. Mai jos găsiți formula, ce păstrează și ce nu poate păstra conversia, unde ajută unitățile ferestrei de afișare și unde strică, problema de accesibilitate pe care o creează textul exclusiv în vw, tehnica clamp care o rezolvă și o metodă de a transforma o machetă în pixeli într-o foaie de stil fluidă.
Formula și lățimea
vw este egal cu px împărțit la lățime, ori o sută
Formula este vw = px ÷ lățime × 100. Cu o lățime de design de 1440 px, o mărime de 144 px devine 10 vw, 72 px devine 5 vw, iar 24 px devine 1,667 vw. Pagina arată lățimea lângă rezultat, ca în 144 px = 10 vw (1440 px), ca să puteți vedea ce s-a presupus. Un vw este a suta parte din lățimea ferestrei de afișare, deci o fereastră lată de 1000 px are 1 vw egal cu 10 px.
De unde vine 1440
Cei 1440 px de aici sunt o lățime la care designurile se desenează adesea, un obicei, nu un standard. Unele echipe desenează la 1280, multe la 1920, iar designurile pentru mobil la 375 sau 390. Nu există un răspuns corect, ci doar lățimea pe care o folosește fișierul dumneavoastră de design. Tastați-o pe a dumneavoastră: conversia este la fel de bună ca lățimea pe care i-o dați.
Folosirea lățimii proprii a designului
Dacă macheta a fost desenată la 1920 px, tastați 1920, iar același titlu de 96 px devine 5 vw. Dacă convertiți px în vw cu lățimea greșită, pagina va arăta bine la o mărime de ecran și prost la toate celelalte, ceea ce este o eroare derutantă când nu știți să o căutați.
Ce păstrează conversia și ce nu poate
Păstrează partea din ecran
Un vw este a suta parte din lățimea ferestrei de afișare, deci o mărime scrisă în vw crește și se micșorează odată cu fereastra, în loc să rămână pe loc. Rezultatul este partea din ecran pe care o ocupa valoarea în pixeli în macheta dumneavoastră, iar în browser elementul păstrează acea parte la orice lățime.
Nu poate da o valoare implicită
Spre deosebire de rem, vw nu are o valoare implicită. Un browser dă fontului rădăcinii 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 își întoarce telefonul. Lățimea din câmp este lățimea designului dumneavoastră, iar răspunsul este corect pentru un ecran de acea lățime și proporțional peste tot în rest.
Rotunjirea
Împărțirea la 1440 produce zecimale lungi pentru cele mai multe mărimi. O valoare ca 6.6667 vw este în regulă într-o foaie de stil, dar puteți rotunji la 6.67 sau 6.7 fără nicio schimbare vizibilă. Păstrați două sau trei cifre după virgulă; mai multe sunt zgomot.
Unde ajută unitățile ferestrei de afișare
Titluri principale și litere mari de afișare
Un titlu care trebuie să umple o anumită parte din ecran pe orice dispozitiv este folosirea clasică. La lățimea unui telefon un titlu fix de 96 px ar depăși ecranul; în vw se micșorează odată cu ecranul și rămâne pe un singur rând.
Secțiuni pe toată lățimea
Spațierea dintre secțiunile mari ale unei pagini de prezentare arată adesea cel mai bine când se scalează cu ecranul, astfel încât pagina își păstrează ritmul pe un laptop mic și pe un afișaj lat. Spațiile în vw fac asta.
Ilustrații care trebuie să-și păstreze forma
Imaginile principale, ilustrațiile și formele decorative dimensionate în vw își păstrează proporțiile față de fereastră, deci compoziția nu se destramă pe măsură ce ecranul se schimbă.
Litere fluide cu limite
Combinat cu clamp(), vw dă litere care cresc lin între un minim și un maxim. Aceasta este tehnica pe care o folosesc foile de stil moderne pentru titluri și este tratată mai jos.
Unde strică unitățile ferestrei de afișare
Text de bază exclusiv în vw
Textul dimensionat doar în vw nu răspunde când cititorul mărește pagina în browser, deoarece mărirea schimbă mărimea în pixeli a ferestrei, dar o mărime în vw își păstrează partea din ea. Oamenii care se bazează pe mărire, adesea din cauza vederii slabe, rămân cu text pe care nu-l pot mări. Ghidurile de accesibilitate cer ca textul să poată fi redimensionat, iar o mărime exclusiv în vw nu trece acest test.
Extreme minuscule și uriașe
La o lățime de 320 px un titlu de 6,67 vw are 21 px, ceea ce poate fi prea mic. La o lățime de 2560 px are 171 px, ceea ce este enorm. Fără limite, proporția care arăta bine la 1440 poate fi absurdă la margini.
Bara de derulare
În browserele de desktop, lățimea ferestrei de afișare folosită pentru vw include lățimea barei verticale de derulare. O casetă setată la 100vw va fi deci puțin mai lată decât zona vizibilă când pagina se derulează și poate apărea o bară orizontală de derulare. Știți asta înainte de a construi o aranjare pe toată lățimea din vw.
Tehnica clamp
Stabilirea unui prag inferior și a unui plafon
Funcția CSS clamp(min, preferat, max) primește un minim, o valoare preferată și un maxim. Pentru litere, scrieți minimul și maximul în rem, iar valoarea preferată în vw plus un termen în rem: font-size: clamp(2rem, 1rem + 4vw, 6rem). Mărimea crește odată cu fereastra între 32 și 96 px și nu depășește niciodată vreunul dintre capete. Deoarece o parte este în rem, textul respectă în continuare setările cititorului.
Cum construiți termenul din mijloc
Alegeți două lățimi de ecran și mărimile dorite la fiecare. De exemplu 32 px la 360 px lățime și 96 px la 1440 px lățime. Panta este (96 − 32) ÷ (1440 − 360) = 0,0593 px pe px de lățime, adică 5,93 vw, iar termenul liber este 32 − 0,0593 × 360 = 10,67 px, aproximativ 0,667 rem. Termenul preferat este deci 0.667rem + 5.93vw. Convertorul vă ajută cu partea în vw, iar un minut de aritmetică face restul.
De ce este acesta echilibrul potrivit
Cu clamp obțineți comportamentul fluid pe care îl vor designerii și accesibilitatea de care au nevoie cititorii. Este răspunsul la problema descrisă mai sus și motivul pentru care majoritatea foilor de stil moderne folosesc vw doar în interiorul lui clamp.
Cum convertiți px în vw aici
Tastați valoarea în pixeli
Introduceți mărimea în pixeli în primul câmp. Zecimalele sunt acceptate.
Setați lățimea designului
Lăsați-o la 1440 dacă aceasta este lățimea machetei dumneavoastră. Schimbați-o dacă nu este. Rezultatul se actualizează în timp ce tastați.
Copiați valoarea în vw
Folosiți cifra în CSS cu unitatea ei, ca în font-size: 6.67vw. Pentru text, puneți-o în interiorul lui clamp() împreună cu limite în rem.
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 deveneau mai clare. Așa că pixelul CSS a fost redefinit ca o lungime de referință: aproximativ 1/96 dintr-un inch văzut la o distanță comodă de citit. Este unitatea în care este desenată macheta dumneavoastră.
Unitățile ferestrei de afișare
Vw a apărut odată cu designul responsiv: a suta parte din lățimea ferestrei de afișare, oricât s-ar dovedi aceasta. Stă alături de rem, care este relativ la mărimea fontului rădăcinii, și de em, care este relativ la element. Dacă aveți nevoie de mărimi relative la text în loc de ecran, convertiți px în rem.
Capcane când convertiți px în vw
Folosirea lățimii greșite a designului
Cea mai frecventă eroare. Dacă macheta dumneavoastră are 1920 lățime și convertiți cu 1440, fiecare mărime este greșită cu o treime. Confirmați lățimea cadrului în instrumentul de design.
Uitarea designului pentru mobil
Multe echipe au două machete, una pentru desktop și una pentru telefon. Un titlu care are 96 px pe prima și 40 px pe a doua nu este o singură valoare vw. Folosiți două lățimi, două conversii și un clamp care să le unească.
Punerea întregii pagini în vw
O pagină în care totul se scalează cu fereastra pierde simțul lecturii: rândurile devin prea lungi pe ecrane late, iar textul prea mic pe cele înguste. Folosiți vw pentru puținele lucruri care trebuie să se scaleze și mărimi fixe sau rem pentru restul.
Ignorarea problemei măririi
Testați pagina cu browserul mărit la 200 la sută. Dacă textul nu crește, mărimile au nevoie de un termen rem.
Întrebări pe care și le pun oamenii înainte de conversie
Câți vw sunt 100 px?
La o lățime de design de 1440 px, aproximativ 6,94 vw.
Care este cea mai bună lățime de design de folosit?
Cea la care a fost desenată macheta dumneavoastră. Nu există o valoare implicită universală.
Este vw mai bun decât rem?
Fac treburi diferite. Rem urmează mărimea textului cititorului; vw urmează fereastra. Folosiți fiecare pentru ce face bine.
Pot folosi vw pentru mărimea fontului?
Da, dar puneți-l în interiorul lui clamp() cu limite în rem, astfel încât textul să rămână lizibil și să poată fi încă mărit.
Este numărul meu încărcat?
Nu. Aritmetica rulează în browserul dumneavoastră și nimic nu este trimis nicăieri.
Cum mă întorc?
Cu vw în px, care înmulțește cu lățimea în loc să împartă.
Alegerea înțeleaptă când convertiți px în vw
Hotărâți ce ar trebui să se scaleze cu ecranul
Literele principale, spațiile mari și ilustrațiile: da. Textul de bază, chenarele, controalele mici: nu. Cu cât lista dumneavoastră de valori vw este mai scurtă, cu atât pagina este mai robustă.
Convertiți în etapa de design
Dacă convertiți px în vw în timp ce citiți macheta, puteți vedea imediat ce valori ies ciudate și puteți cere designerului altele mai ordonate. Un titlu care iese 6.6667 vw invită la o discuție despre a-l face 6.5 sau 7.
Păstrați o evidență a lățimii
Scrieți lățimea designului într-un comentariu în capul foii de stil, astfel încât oricine convertește mai târziu să folosească aceeași. Lățimile amestecate produc o pagină inconsecventă într-un fel pe care nimeni nu-l poate explica prea bine.
De la machetă la o foaie de stil fluidă
Listați mărimile care ar trebui să se scaleze
Deschideți fișierul de design și notați fiecare mărime pe care o vreți să urmeze ecranul: titlul principal, spațiile dintre secțiuni, poate o ilustrație mare. Pentru fiecare, convertiți px în vw față de lățimea cadrului și notați rezultatul. Cele mai multe pagini ajung la mai puțin de zece astfel de valori, iar tot restul rămâne în rem sau pixeli.
Verificați separat cadrul pentru mobil
Dacă există o machetă pentru telefon, citiți aceleași elemente la lățimea ei. Un titlu de 96 px pe un cadru de 1440 px și de 40 px pe unul de 375 px nu se potrivește cu nicio valoare vw unică, ceea ce este semnalul să folosiți clamp: mărimea de telefon devine pragul inferior, cea de desktop plafonul, iar termenul vw face munca dintre ele. Când convertiți px în vw pentru fiecare cadru, cele două numere definesc panta.
Revizuiți la trei lățimi
Priviți pagina terminată la aproximativ 360, 820 și 1440 de pixeli și o dată la 2560. Aranjările fluide sunt ușor de făcut corect la lățimea machetei și subtil greșite în altă parte, iar o scurtă trecere prin aceste lățimi găsește cele mai multe probleme înaintea unui vizitator.
Țineți unitatea departe de textul lung
Rândurile de text de citit se dimensionează cel mai bine în rem și li se dă o lungime maximă de rând de în jur de 60 până la 75 de caractere. Folosiți unitatea ferestrei de afișare pentru literele de afișare și pentru spațiere și lăsați textul de citit să fie stabil.
Convertoare înrudite
Aceeași familie de instrumente acoperă conversiile vecine. Ca să vă întoarceți la pixeli, folosiți vw în px. Pentru mărimi relative la rădăcină există px în rem și rem în px, iar pentru mărimi relative la element, px în em și em în px. Pentru culorile aceleiași foi de stil, HEX în RGB și HEX în HSL se ocupă de notații.
Un exemplu lucrat
Să presupunem că o pagină de prezentare este proiectată la 1440 px, cu un titlu principal de 96 px și un spațiu de 72 px deasupra lui. Tastați 96 și citiți 6,667 vw, tastați 72 și citiți 5 vw. Pe o fereastră de 1000 px titlul are 66,7 px, iar spațiul 50 px, în proporție. Dar pe un telefon lat de 360 px titlul ar avea 24 px, ceea ce este mai mic decât vreți, așa că scrieți titlul ca clamp(2.25rem, 1rem + 5vw, 6rem), obținând un prag de 36 px și un plafon de 96 px, iar el rămâne lizibil și poate fi mărit. Spațiul, care nu are text, rămâne în vw simplu.
O listă scurtă de verificare
Înainte de conversie
Aflați lățimea machetei. Hotărâți care mărimi ar trebui să se scaleze și care nu.
În timpul conversiei
Tastați valoarea în pixeli și lățimea designului și copiați cifra vw cu unitatea ei.
După conversie
Redimensionați fereastra de la lățimea unui telefon la un monitor lat și măriți pagina la 200 la sută. Adăugați limite cu clamp() oriunde extremele arată greșit.
Greșeli frecvente
Presupunerea că 1440 este un standard
Este doar un obicei. Folosiți propria lățime.
Dimensionarea textului de bază doar în vw
Nu poate fi mărit. Adăugați un termen rem și limite.
Uitarea barei de derulare
100vw este mai lat decât zona vizibilă pe paginile de desktop care se derulează.
Numerele dumneavoastră rămân pe dispozitiv
Calculul se face local. Valorile dumneavoastră sunt folosite de propriul dumneavoastră 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 px în vw.
Rezumat
Ca să convertiți px în vw aici, tastați mărimea în pixeli și lățimea designului dumneavoastră și citiți imediat rezultatul, folosind formula vw = px ÷ lățime × 100. Lățimea pornește de la 1440 px, o lățime la care designurile se desenează adesea, dar este un obicei, nu un standard, așa că tastați-o pe a dumneavoastră. Conversia păstrează partea din ecran: un vw este a suta parte din lățimea ferestrei de afișare, deci o mărime în vw crește și se micșorează odată cu fereastra. Spre deosebire de rem, vw nu are o valoare implicită, deoarece fereastra de afișare este cât de lată este fereastra cititorului. Pentru text, combinați vw cu rem în interiorul lui clamp(), astfel încât să rămână lizibil și să poată fi mărit. Nimic nu este încărcat.