Convertire vw in px Viewport width ↔ Pixels Gratis Online Sicuro
Scriva un valore in vw e lo legga subito in px. Il conto si fa nel suo browser, non si manda nulla da nessuna parte, e da che cosa dipende il risultato è scritto più sotto invece di essere dato per scontato.
Non si carica niente
Misure consuete — Convertire vw in px
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
Da dove vengono queste unità
Il pixel del CSS non è il pixel del vostro schermo. Quando i display smisero di avere una densità prevedibile, una pagina misurata in pixel veri divenne una pagina che rimpiccioliva man mano che gli schermi si facevano più fini; così il pixel CSS fu ridefinito come lunghezza di riferimento: circa 1/96 di pollice, visto a una comoda distanza di lettura. Tutto il resto di questa pagina poggia su ciò. L'em è più vecchio del web — nei caratteri di piombo era la larghezza di un blocco fuso, chiamato così dalla M maiuscola — e in CSS significa la dimensione del carattere in vigore, per cui cambia quando si annidano gli elementi. Il rem fu aggiunto proprio per sfuggire a questo: è l'em dell'elemento radice e non si compone mai. Il vw è arrivato con il disegno adattivo: un centesimo della larghezza della finestra, qualunque essa sia.
Dove le incontra
Queste sono le unità di ogni foglio di stile. I pixel dimensionano bordi, ombre e tutto ciò che non deve scalare; il rem dimensiona i caratteri, le spaziature e l'impaginazione, sicché una sola modifica alla radice ridimensiona un'intera interfaccia; l'em dimensiona ciò che deve seguire il proprio testo, come l'imbottitura di un pulsante; il vw dimensiona titoli e testate che devono riempire lo schermo su qualunque apparecchio. Convertire fra loro è l'aritmetica quotidiana con cui un progetto consegnato in pixel diventa un foglio di stile che si adatta.
Domande frequenti
Perché 16 px è il punto di partenza abituale?
Perché è la dimensione predefinita del testo in tutti i browser principali, e un foglio di stile che non la sovrascrive la eredita. Un rem vale quindi 16 px con l'impostazione predefinita, e di lì vengono le conversioni familiari: 0,5 rem sono 8 px, 1,5 rem sono 24 px. Se un utente ha ingrandito il valore predefinito nelle impostazioni, gli stessi valori in rem crescono con esso — che è esattamente lo scopo di usarli.
Devo usare rem o em?
Rem per tutto ciò che deve seguire la pagina nel suo insieme — scala tipografica, spaziature, larghezze d'impaginazione — perché si misura dalla radice e non si accumula mai. Em per tutto ciò che deve seguire il testo in cui sta: l'imbottitura di un pulsante, lo spazio accanto a un'icona, il rientro di una citazione. L'errore comune è annidare elementi dimensionati in em: 1,2 em dentro 1,2 em diventa 1,44, poi 1,73, finché il testo in fondo alla pagina è grande il doppio del previsto.
Il risultato è esatto?
Dove le due unità si definiscono l'una per mezzo dell'altra con numeri interi, sì: la pagina lo dice sopra la cifra, e l'unico arrotondamento sta in quante cifre si mostrano. Dove il rapporto non ha decimale finita, la pagina mostra dodici cifre significative e dice che la relazione è approssimata invece di fingere il contrario.
Qualcosa di quel che scrivo lascia il mio dispositivo?
No. Il calcolo avviene nel suo browser; non viene inviato nulla, e non c'è nemmeno un server a cui inviarlo. Caricata una volta, la pagina continua a funzionare con la rete spenta.
Perché si convertono vw in px
Un foglio di stile dice font-size: 5.2vw su un titolo principale, margin-top: 8vw su una sezione e width: 42vw su un'immagine. Sono valori flessibili, e non ti dicono cosa c'è sullo schermo. Quanto è grande il titolo su un telefono? Quanto è larga l'immagine su un portatile? Il margine appare giusto a 1920 pixel? Per scoprirlo converti vw in px: moltiplichi il numero per la larghezza della finestra e dividi per cento, e leggi la risposta nell'unità che usano progettisti, collaudatori e clienti. È ciò che fai quando rivedi codice fluido, controlli una build rispetto a un mockup o spieghi a un collega perché il titolo sembra piccolo su uno schermo stretto.
Ciò che rende la conversione diversa da rem o em è che il moltiplicatore è la finestra stessa. Un vw è un centesimo della larghezza del viewport, quindi 5,2vw sono 52 px in una finestra larga 1000 px, 18,7 px in un telefono largo 360 px e 99,8 px su un monitor largo da 1920. Non c'è alcun valore predefinito a cui ripiegare, e la larghezza cambia quando il lettore ruota il telefono o trascina la finestra. Il convertitore chiede quindi la larghezza, la mostra accanto alla risposta e parte da 1440 px, una larghezza a cui i progetti sono spesso disegnati.
Il calcolo avviene nel tuo browser, e nulla viene caricato. Qui sotto trovi la formula, cosa la conversione mantiene e cosa non può mantenere, come leggere un foglio di stile fluido a più larghezze, la trappola della barra di scorrimento, il problema di accessibilità del testo in puro vw e alcune abitudini che mantengono comprensibile il codice fluido.
La formula e la larghezza
px è uguale a vw moltiplicato per la larghezza, diviso cento
La formula è px = vw × larghezza ÷ 100. A una larghezza di 1440 px, 10 vw diventano 144 px, 5 vw diventano 72 px e 1,667 vw diventano 24 px. La pagina stampa la larghezza accanto al risultato, quindi una riga come 10 vw = 144 px (1440 px) ti dice cosa è stato assunto. Per vedere un altro schermo, cambia la larghezza e leggi di nuovo il risultato.
Quali larghezze provare
Un insieme utile da controllare è 360 o 390 per i telefoni, 768 per un tablet in verticale, 1024 per un piccolo portatile, 1440 per un portatile o un desktop tipico e 1920 per un monitor full-HD. Digita ciascuna nel campo della larghezza e annota il risultato. Cinque letture ti mostrano l'intero intervallo di un valore, e ogni estremo salta all'occhio.
Usare la larghezza della finestra reale
Negli strumenti per sviluppatori del browser, la barra dei dispositivi mostra la larghezza della finestra in pixel. Usa quel numero per confrontare ciò che fa la pagina con ciò che dice il convertitore. Se coincidono, la tua lettura del foglio di stile è giusta.
Cosa la conversione mantiene e cosa no
Mantiene la quota dello schermo
Un vw è un centesimo della larghezza del viewport, quindi una dimensione scritta in vw cresce e si riduce con la finestra invece di restare ferma. Il valore in pixel che ottieni è quella quota resa concreta per una particolare larghezza.
Non può dare un valore predefinito
A differenza di rem, vw non ha un valore predefinito. Un browser dà alla dimensione del carattere radice 16 px quando nessuno dice altro, quindi una pagina in rem può partire da un numero reale; la larghezza del viewport è semplicemente quanto è larga la finestra del lettore, e cambia quando gira il telefono. I 1440 px qui sono una larghezza a cui i progetti sono spesso disegnati, un'abitudine e non uno standard. Digita la tua.
Arrotondamento
Moltiplicare per la larghezza e dividere per 100 può produrre decimali. 6,67 vw a 1440 px sono 96,048 px. I browser gestiscono i pixel frazionari, ma se ti serve un numero intero per un file di progetto, arrotonda e annota che l'arrotondamento è tuo.
Leggere un foglio di stile fluido
Prendi tre larghezze e scrivi i risultati
Scegli una larghezza stretta, una media e una grande, per esempio 375, 1024 e 1920. Per ogni valore vw importante nel foglio di stile, converti vw in px a ciascuna larghezza e scrivi i tre numeri in una nota. Un titolo di 5,2 vw dà 19,5, 53,2 e 99,8 pixel. Visto così, sai se il titolo è leggibile all'estremo stretto e non travolgente all'estremo largo.
Cerca clamp
Il codice fluido ben scritto mette dei limiti attorno a vw con clamp(min, preferito, max). Se vedi clamp(2rem, 1rem + 4vw, 6rem), la dimensione cresce fra 32 e 96 px e si ferma a entrambi gli estremi. Quando converti la parte in vw, ricorda che è solo il centro dell'intervallo, e sono i limiti a decidere cosa succede ai bordi.
Controlla gli estremi
Le larghezze a rischio sono la più piccola e la più grande. A 320 px un titolo di 6 vw è 19 px; a 2560 è 154 px. Se nessuno dei due ti sembra accettabile e non c'è un clamp, il foglio di stile ha bisogno di limiti.
Trappole quando converti vw in px
La barra di scorrimento
Nei browser desktop, la larghezza del viewport usata per vw include la larghezza della barra di scorrimento verticale. Quindi 100vw è un po' più largo dell'area visibile quando la pagina scorre, di circa 15-17 pixel su molti sistemi. Il valore in pixel che calcoli è perciò leggermente più grande della larghezza visibile che sembra rappresentare. Sui telefoni, dove le barre di scorrimento si sovrappongono alla pagina, l'effetto è assente.
Usare la larghezza sbagliata
Il risultato è giusto solo quanto la larghezza che digiti. Se la tua finestra di prova è larga 1366 px e converti a 1440, ogni valore è sbagliato di circa cinque per cento. Leggi la larghezza reale dagli strumenti per sviluppatori.
Confondere vw con la percentuale
Una larghezza del 50% si riferisce alla larghezza del genitore, mentre 50vw si riferisce alla finestra. In un contenitore stretto i due sono molto diversi. Il convertitore dà la risposta in vw; se il tuo elemento è dentro un contenitore, il genitore può essere più stretto della finestra.
Dimenticare che il testo in vw non si può ingrandire
Il testo dimensionato solo in vw non risponde quando il lettore ingrandisce la pagina, perché la finestra e il testo scalano insieme. Le linee guida sull'accessibilità chiedono che il testo possa essere ridimensionato. Aggiungi un termine in rem, come in clamp(), così che il testo risponda anche allo zoom.
Domande che la gente si pone prima di convertire
Quanti pixel sono 1 vw?
Un centesimo della larghezza della finestra: 14,4 px a 1440, 10 px a 1000, 3,6 px a 360.
Quanti pixel sono 50 vw?
Metà della finestra: 720 px con larghezza 1440, 500 px con larghezza 1000.
Perché la mia pagina è più larga dello schermo?
Un riquadro di 100vw in una pagina che scorre è più largo dell'area visibile perché la barra di scorrimento viene conteggiata. Usa invece 100% dentro un contenitore.
vw è lo stesso della percentuale?
No. La percentuale si riferisce al genitore, vw alla finestra.
Il mio numero viene caricato?
No. L'aritmetica gira nel tuo browser e nulla viene inviato da nessuna parte.
Come torno indietro?
Con da px a vw, che divide per la larghezza invece di moltiplicare.
Valori comuni a larghezze comuni
Una tabella mentale
Aiuta conoscere qualche punto fermo per poter stimare prima di usare il convertitore. A una larghezza di 1000 px, 1 vw è 10 px, il che rende banale l'aritmetica: 2,5 vw sono 25 px, 8 vw sono 80 px. A 1440 px, 1 vw è 14,4 px. A 375 px, 1 vw è 3,75 px, quindi un titolo di 8 vw è 30 px. Quando converti vw in px per un controllo rapido, parti da uno di questi punti fermi e scala.
Tre larghezze, un foglio di stile
Prendi una scheda con una larghezza di 80vw, uno spazio di 4vw e un titolo di 6vw. Su un telefono da 375 px arrivano a 300 px, 15 px e 22,5 px. Su un tablet da 768 px, 614 px, 30,7 px e 46 px. Su un desktop da 1440 px, 1152 px, 57,6 px e 86,4 px. Vedere i tre affiancati ti dice subito che la scheda è decisamente troppo larga sul desktop e il titolo decisamente troppo grande, e che probabilmente ti servono una larghezza massima e un clamp.
Oltre il viewport
Unità del contenitore
Il CSS più recente offre unità relative a un contenitore invece che alla finestra, come cqw, che è un centesimo della larghezza del contenitore. Risolvono il problema per cui un componente messo in una barra laterale stretta si comporta come se avesse l'intera finestra. Se le usi, l'aritmetica è la stessa di vw, con la larghezza del contenitore come base, e puoi usare questo convertitore digitando quella larghezza.
Viewport piccoli, grandi e dinamici
Sui telefoni, l'area visibile cambia quando la barra degli indirizzi scorre via. Per le altezze, le unità più recenti svh, lvh e dvh descrivono il viewport piccolo, grande e dinamico. Per le larghezze la situazione è più semplice, dato che la barra degli indirizzi non le influenza, e vw è stabile. È un altro motivo per cui vw è un'unità più sicura di vh per il design fluido su mobile.
Percentuale, vw e la griglia
Le larghezze in percentuale seguono il genitore, vw segue la finestra, e CSS grid e flexbox seguono lo spazio disponibile. Spesso i migliori layout fluidi usano grid e percentuali per la struttura e vw solo per i caratteri e la spaziatura, perché sono le cose che traggono vantaggio dal seguire direttamente lo schermo. Quando converti vw in px per controllare un layout, chiediti se una traccia della griglia avrebbe detto la stessa cosa in modo più robusto.
Spiegare vw a chi non scrive CSS
Usa la finestra come righello
Clienti e colleghi di solito capiscono l'idea quando dici che un vw è l'uno per cento della larghezza dello schermo. Un titolo di 5 vw è largo cinque per cento dello schermo. Poi mostra loro due numeri: a quanto arriva sul loro telefono e sul grande monitor della sala riunioni. Quando converti vw in px per entrambe le larghezze e dici i risultati ad alta voce, l'idea di una dimensione che si muove con lo schermo diventa concreta.
Spiega perché il design non è fisso
I committenti non tecnici chiedono a volte perché la pagina non abbia semplicemente una sola dimensione per il titolo. La risposta è che gli schermi differiscono di un fattore sette o otto fra il telefono più piccolo e il monitor più grande, e una dimensione fissa che va bene per uno è sbagliata per l'altro. Le unità fluide sono la risposta, e le cifre in pixel di questa pagina mostrano quanto lo schermo cambi lo stesso valore.
Da dove vengono queste unità
Il pixel CSS
Quando gli schermi smisero di avere una densità prevedibile, una pagina misurata in pixel reali diventava una pagina che si rimpiccioliva man mano che gli schermi diventavano più nitidi. Così il pixel CSS fu ridefinito come lunghezza di riferimento: circa 1/96 di pollice visto a una comoda distanza di lettura. È l'unità in cui questa pagina dà le sue risposte.
Le unità del viewport
vw è arrivato con il design responsivo: un centesimo della larghezza del viewport, qualunque essa risulti. Sta accanto a rem, relativo alla dimensione del carattere radice, e a em, relativo all'elemento. Per vedere come appare lo stesso valore in pixel in quelle unità, converti rem in px e confronta.
Abitudini che mantengono comprensibile il codice fluido
Commenta i valori in pixel
Una riga come font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ costa poche parole e risparmia al lettore successivo diverse conversioni.
Tieni la larghezza di progetto in un solo posto
Se il tuo progetto ha una proprietà personalizzata per la larghezza a cui il design è stato disegnato, ogni valore vw può essere ricondotto a essa. Quando converti vw in px per una revisione, sai quale larghezza usare.
Usa vw con parsimonia
Un breve elenco di valori vw è facile da ragionare. Un foglio di stile in cui tutto è in vw no. Riservalo ai caratteri di titolo, agli spazi grandi e alle illustrazioni.
Prova con dispositivi reali quando conta
Gli strumenti del browser simulano bene le larghezze, ma un vero telefono mostra il comportamento reale di barre degli indirizzi, rotazione e zoom. Un controllo di cinque minuti su un dispositivo coglie ciò che una simulazione perde.
Convertitori correlati
La stessa famiglia di strumenti copre le conversioni vicine. Per tornare a vw, usa da px a vw. Per le dimensioni relative alla radice ci sono da px a rem e da rem a px, e per quelle relative all'elemento da px a em e da em a px. Per i colori dello stesso foglio di stile, da HEX a RGB e da RGB a HEX gestiscono le notazioni.
Un esempio svolto
Poniamo che un collaudatore segnali che il titolo principale è difficile da leggere su un piccolo telefono. Il foglio di stile dice font-size: 5.2vw senza limiti. Converti vw in px a 360 e leggi 18,7 px, a 768 leggi 39,9 px, a 1440 leggi 74,9 px. All'estremo stretto il titolo è un po' più grande del testo e non si legge più come un titolo. Suggerisci clamp(2rem, 1rem + 4vw, 5rem), che dà 32 px al più stretto, circa 51 px a 768 e 5rem, 80 px, al più largo. Il collaudatore conferma che ora si legge bene, e il titolo scala ancora.
Una breve lista di controllo
Prima di convertire
Scegli le larghezze che ti interessano, dagli strumenti per sviluppatori o dal tuo elenco di dispositivi di destinazione.
Mentre converti
Digita il valore in vw e ogni larghezza a turno, e annota i pixel mostrati accanto alla base.
Dopo aver convertito
Guarda gli estremi. Se una dimensione è troppo piccola o troppo grande a uno dei due capi, aggiungi limiti con clamp().
Errori comuni
Supporre una risposta unica
Un valore vw ha una dimensione in pixel diversa a ogni larghezza. Dai la larghezza con ogni cifra.
Dimenticare la barra di scorrimento
100vw la include, quindi un riquadro a tutta larghezza può traboccare.
Dimensionare il testo in vw da solo
Non si può ingrandire. Aggiungi un termine in rem e dei limiti.
I tuoi numeri restano sul tuo dispositivo
Il calcolo avviene in locale. I tuoi valori sono usati dal tuo browser e nulla viene inviato da nessuna parte. Non c'è nulla da cancellare dopo e nessun account da creare. È il modo semplice per convertire vw in px.
Riepilogo
Per convertire vw in px qui, digita la dimensione in vw e la larghezza della finestra, e leggi subito il risultato in pixel, con la formula px = vw × larghezza ÷ 100. La larghezza parte da 1440 px, una larghezza a cui i progetti sono spesso disegnati, ma è un'abitudine e non uno standard, quindi digita la tua. La conversione mantiene la quota dello schermo: un vw è un centesimo della larghezza del viewport, quindi una dimensione in vw cresce e si riduce con la finestra. A differenza di rem, vw non ha un valore predefinito, dato che il viewport è largo quanto è larga la finestra del lettore. Per il testo, combina vw con rem dentro clamp(), così che resti leggibile e ingrandibile. Nulla viene caricato.