Convertire px in vw Pixels ↔ Viewport width Gratis Online Sicuro
Scriva un valore in px e lo legga subito in vw. 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 px in 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 |
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 converte px in vw
Un designer manda un bozzetto disegnato a 1440 px di larghezza, con un titolo principale di 96 px e uno spazio tra sezioni di 72 px. Sul web reale la pagina sarà vista a 360 px su un telefono, 820 px su un tablet e 2560 px su un grande monitor, e il designer vorrebbe che il titolo mantenesse la sua proporzione rispetto allo schermo in ciascuno di essi. L'unità fatta per questo è la larghezza del viewport, vw, e il modo per arrivarci dal bozzetto è convertire px in vw: prendi il valore in pixel, lo dividi per la larghezza a cui era disegnato il design e moltiplichi per cento. Un titolo di 96 px su una tela di 1440 px è 6,67 vw, e da quel momento è sempre il 6,67 per cento di qualunque schermo ci sia.
Questa è la promessa dell'unità del viewport, e anche il suo rischio. Rem ed em partono da una dimensione del carattere, che un browser imposta a un valore predefinito ragionevole. Il vw non ha alcun valore predefinito: la larghezza del viewport è semplicemente quanto è larga la finestra del lettore, e cambia quando ruota il telefono o trascina la finestra. Quindi il convertitore non nasconde l'unico numero da cui dipende la risposta. La larghezza del design sta in un campo, che parte da 1440 px, e puoi cambiarla per adattarla al tuo bozzetto.
L'aritmetica gira nel tuo browser e nulla viene caricato. Più sotto trovi la formula, cosa mantiene e cosa non può mantenere la conversione, dove le unità del viewport aiutano e dove fanno male, il problema di accessibilità che crea il testo in solo vw, la tecnica clamp che lo risolve e un metodo per trasformare un bozzetto in pixel in un foglio di stile fluido.
La formula e la larghezza
vw è uguale a px diviso la larghezza, per cento
La formula è vw = px ÷ larghezza × 100. Con una larghezza di design di 1440 px, una dimensione di 144 px diventa 10 vw, 72 px diventa 5 vw e 24 px diventa 1,667 vw. La pagina mostra la larghezza accanto al risultato, come in 144 px = 10 vw (1440 px), così puoi vedere cosa è stato presupposto. Un vw è un centesimo della larghezza del viewport, quindi in una finestra larga 1000 px, 1 vw equivale a 10 px.
Da dove viene il 1440
I 1440 px qui sono una larghezza a cui i design sono spesso disegnati, un'abitudine e non uno standard. Alcuni team disegnano a 1280, molti a 1920, e i design per dispositivi mobili a 375 o 390. Non c'è una risposta giusta, solo la larghezza che usa il tuo file di design. Digita la tua: la conversione è buona quanto la larghezza che le dai.
Usare la larghezza del design stesso
Se il bozzetto era disegnato a 1920 px, digita 1920, e lo stesso titolo di 96 px diventa 5 vw. Se converti px in vw usando la larghezza sbagliata, la pagina apparirà giusta a una dimensione dello schermo e sbagliata a tutte le altre, il che è un bug sconcertante quando non sai dove cercare.
Cosa mantiene la conversione e cosa non può
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 risultato è la quota dello schermo che il valore in pixel occupava nel tuo bozzetto, e nel browser l'elemento mantiene quella quota a ogni larghezza.
Non può dare un valore predefinito
A differenza del rem, il vw non ha un valore predefinito. Un browser dà alla dimensione del carattere radice 16 px quando nessuno dice altrimenti, 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. La larghezza nel campo è la larghezza del tuo design, e la risposta è giusta per uno schermo di quella larghezza e in proporzione ovunque altrove.
Arrotondamento
Dividere per 1440 produce lunghi decimali per la maggior parte delle dimensioni. Un valore come 6,6667 vw va bene in un foglio di stile, ma puoi arrotondare a 6,67 o 6,7 senza alcun cambiamento visibile. Mantieni due o tre cifre dopo la virgola; di più è rumore.
Dove le unità del viewport aiutano
Titoli principali e grandi caratteri di visualizzazione
Un titolo che deve riempire una data quota dello schermo su ogni dispositivo è l'uso classico. Alla larghezza di un telefono un titolo fisso di 96 px traboccherebbe; in vw si restringe con lo schermo e resta su una riga.
Sezioni a tutta larghezza
La spaziatura tra le grandi sezioni di una landing page appare spesso meglio quando si scala con lo schermo, in modo che la pagina mantenga il suo ritmo su un piccolo portatile e su un grande schermo. Gli spazi in vw lo fanno.
Illustrazioni che devono mantenere la forma
Immagini principali, illustrazioni e forme decorative dimensionate in vw mantengono le loro proporzioni rispetto alla finestra, quindi la composizione non si sfascia al variare dello schermo.
Caratteri fluidi con limiti
In combinazione con clamp(), il vw dà caratteri che crescono con dolcezza tra un minimo e un massimo. È la tecnica che i fogli di stile moderni usano per i titoli, ed è trattata più sotto.
Dove le unità del viewport fanno male
Testo del corpo in solo vw
Il testo dimensionato solo in vw non risponde quando il lettore ingrandisce la pagina nel browser, perché lo zoom cambia la dimensione in pixel della finestra ma una dimensione in vw mantiene la sua quota di essa. Chi si affida allo zoom, spesso per la vista debole, resta con un testo che non può ingrandire. Le linee guida sull'accessibilità chiedono che il testo possa essere ridimensionato, e una dimensione in solo vw non supera quella prova.
Estremi minuscoli ed enormi
A 320 px di larghezza un titolo di 6,67 vw è 21 px, che può essere troppo piccolo. A 2560 px di larghezza è 171 px, che è enorme. Senza limiti, la proporzione che appariva giusta a 1440 può essere assurda agli estremi.
La barra di scorrimento
Nei browser per desktop, la larghezza del viewport usata per il vw include la larghezza della barra di scorrimento verticale. Un riquadro impostato a 100vw sarà quindi un po' più largo dell'area visibile quando la pagina scorre, e può comparire una barra di scorrimento orizzontale. Sappilo prima di costruire un'impaginazione a tutta larghezza con il vw.
La tecnica clamp
Fissare un minimo e un massimo
La funzione CSS clamp(min, preferito, max) prende un minimo, un valore preferito e un massimo. Per i caratteri, scrivi il minimo e il massimo in rem, e il valore preferito in vw più un termine in rem: font-size: clamp(2rem, 1rem + 4vw, 6rem). La dimensione cresce con la finestra tra 32 e 96 px e non va mai oltre nessuno dei due estremi. Poiché una parte è in rem, il testo rispetta comunque le impostazioni del lettore.
Come costruire il termine di mezzo
Scegli due larghezze dello schermo e le dimensioni che vuoi a ciascuna. Per esempio 32 px a 360 px di larghezza e 96 px a 1440 px di larghezza. La pendenza è (96 − 32) ÷ (1440 − 360) = 0,0593 px per px di larghezza, che sono 5,93 vw, e l'intercetta è 32 − 0,0593 × 360 = 10,67 px, circa 0,667 rem. Il termine preferito è quindi 0.667rem + 5.93vw. Il convertitore aiuta con la parte in vw, e un minuto di aritmetica fa il resto.
Perché è l'equilibrio giusto
Con clamp ottieni il comportamento fluido che i designer vogliono e l'accessibilità di cui i lettori hanno bisogno. È la risposta al problema descritto sopra, ed è il motivo per cui la maggior parte dei fogli di stile moderni usa il vw solo dentro clamp.
Come convertire px in vw qui
Digita il valore in pixel
Inserisci la dimensione in pixel nel primo campo. I decimali sono accettati.
Imposta la larghezza del design
Lasciala a 1440 se è la larghezza del tuo bozzetto. Cambiala se non lo è. Il risultato si aggiorna mentre scrivi.
Copia il valore in vw
Usa la cifra nel tuo CSS con la sua unità, come in font-size: 6.67vw. Per il testo, mettila dentro clamp() insieme a limiti in rem.
Da dove vengono queste unità
Il pixel CSS
Quando gli schermi smisero di avere una densità prevedibile, una pagina misurata in pixel reali divenne una pagina che si restringeva man mano che gli schermi diventavano più nitidi. Così il pixel CSS fu ridefinito come una lunghezza di riferimento: circa 1/96 di pollice visto a una comoda distanza di lettura. È l'unità in cui è disegnato il tuo bozzetto.
Le unità del viewport
Il vw è arrivato con il responsive design: un centesimo della larghezza del viewport, qualunque essa risulti. Sta accanto al rem, che è relativo alla dimensione del carattere radice, e all'em, che è relativo all'elemento. Se ti servono dimensioni relative al testo invece che allo schermo, converti px in rem.
Trappole quando converti px in vw
Usare la larghezza di design sbagliata
L'errore più comune. Se il tuo bozzetto è largo 1920 e converti con 1440, ogni dimensione è sbagliata di un terzo. Conferma la larghezza del riquadro nel tuo strumento di design.
Dimenticare il design mobile
Molti team hanno due bozzetti, uno per il desktop e uno per il telefono. Un titolo che è 96 px nel primo e 40 px nel secondo non è un unico valore in vw. Usa due larghezze, due conversioni e un clamp per unirle.
Mettere l'intera pagina in vw
Una pagina in cui tutto si scala con la finestra perde il senso della lettura: le righe diventano troppo lunghe sugli schermi larghi e il testo troppo piccolo su quelli stretti. Usa il vw per le poche cose che devono scalarsi, e dimensioni fisse o in rem per il resto.
Ignorare il problema dello zoom
Prova la tua pagina con il browser ingrandito al 200 per cento. Se il testo non cresce, le dimensioni hanno bisogno di un termine in rem.
Domande che si fanno prima di convertire
Quanti vw sono 100 px?
A una larghezza di design di 1440 px, circa 6,94 vw.
Qual è la larghezza di design migliore da usare?
Quella a cui era disegnato il tuo bozzetto. Non esiste un valore predefinito universale.
Il vw è meglio del rem?
Fanno lavori diversi. Il rem segue la dimensione del testo del lettore; il vw segue la finestra. Usa ciascuno per ciò in cui è bravo.
Posso usare il vw per la dimensione del carattere?
Sì, ma mettilo dentro clamp() con limiti in rem, in modo che il testo resti leggibile e possa comunque essere ingrandito.
Il mio numero viene caricato?
No. L'aritmetica gira nel tuo browser e nulla viene inviato da nessuna parte.
Come torno indietro?
Con da vw a px, che moltiplica per la larghezza invece di dividere.
Scegliere con giudizio quando converti px in vw
Decidi cosa deve scalarsi con lo schermo
Caratteri del titolo principale, grandi spazi e illustrazioni: sì. Testo del corpo, bordi, piccoli controlli: no. Quanto più corto è il tuo elenco di valori in vw, tanto più robusta è la pagina.
Converti in fase di design
Se converti px in vw mentre leggi il bozzetto, puoi vedere subito quali valori risultano dispari e chiedere al designer valori più ordinati. Un titolo che risulta 6,6667 vw invita a una conversazione per renderlo 6,5 o 7.
Tieni traccia della larghezza
Scrivi la larghezza del design in un commento in cima al foglio di stile, in modo che chiunque converta in seguito usi la stessa. Larghezze miste producono una pagina incoerente in un modo che nessuno riesce a spiegare del tutto.
Dal bozzetto a un foglio di stile fluido
Elenca le dimensioni che devono scalarsi
Apri il file di design e annota ogni dimensione che vuoi che segua lo schermo: il titolo principale, gli spazi tra sezioni, forse una grande illustrazione. Per ciascuna, converti px in vw rispetto alla larghezza del riquadro, e annota il risultato. La maggior parte delle pagine finisce con meno di dieci valori simili, e tutto il resto resta in rem o in pixel.
Controlla separatamente il riquadro mobile
Se c'è un bozzetto per il telefono, leggi gli stessi elementi alla sua larghezza. Un titolo di 96 px su un riquadro di 1440 px e di 40 px su uno di 375 px non si adatta a nessun singolo valore in vw, ed è il segnale per usare clamp: la dimensione del telefono diventa il minimo, quella del desktop il massimo, e il termine in vw fa il lavoro nel mezzo. Quando converti px in vw per ciascun riquadro, i due numeri definiscono la pendenza.
Rivedi a tre larghezze
Guarda la pagina finita a circa 360, 820 e 1440 pixel, e una volta a 2560. Le impaginazioni fluide sono facili da fare giuste alla larghezza del bozzetto e sottilmente sbagliate altrove, e un breve passaggio attraverso queste larghezze trova la maggior parte dei problemi prima di un visitatore.
Tieni l'unità fuori dal testo lungo
Le righe di testo da leggere si dimensionano meglio in rem, e con una lunghezza massima di riga di circa 60-75 caratteri. Usa l'unità del viewport per i caratteri di visualizzazione e per la spaziatura, e lascia che il testo da leggere sia stabile.
Convertitori correlati
La stessa famiglia di strumenti copre le conversioni vicine. Per tornare ai pixel, usa da vw a px. Per le dimensioni relative alla radice, ci sono da px a rem e da rem a px, e per le dimensioni 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 HEX a HSL gestiscono le notazioni.
Un esempio svolto
Poniamo che una landing page sia progettata a 1440 px, con un titolo principale di 96 px e uno spazio di 72 px sopra di esso. Digiti 96 e leggi 6,667 vw, digiti 72 e leggi 5 vw. In una finestra di 1000 px il titolo è 66,7 px e lo spazio 50 px, in proporzione. Ma su un telefono largo 360 px il titolo sarebbe 24 px, che è più piccolo di quanto vuoi, quindi scrivi il titolo come clamp(2.25rem, 1rem + 5vw, 6rem), dando un minimo di 36 px e un massimo di 96 px, e resta leggibile e ingrandibile. Lo spazio, che non ha testo, resta in semplice vw.
Una breve lista di controllo
Prima di convertire
Trova la larghezza del bozzetto. Decidi quali dimensioni devono scalarsi e quali no.
Durante la conversione
Digita il valore in pixel e la larghezza del design, e copia la cifra in vw con la sua unità.
Dopo la conversione
Ridimensiona la finestra dalla larghezza di un telefono a un monitor largo, e ingrandisci la pagina al 200 per cento. Aggiungi limiti con clamp() dove gli estremi appaiono sbagliati.
Errori comuni
Dare per scontato che 1440 sia uno standard
È solo un'abitudine. Usa la tua larghezza.
Dimensionare il testo del corpo solo in vw
Non si può ingrandire. Aggiungi un termine in rem e dei limiti.
Dimenticare la barra di scorrimento
100vw è più largo dell'area visibile nelle pagine desktop che scorrono.
I tuoi numeri restano sul tuo dispositivo
Il calcolo avviene in locale. I tuoi valori vengono 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 di convertire px in vw.
Riepilogo
Per convertire px in vw qui, digita la dimensione in pixel e la larghezza del tuo design, e leggi subito il risultato, usando la formula vw = px ÷ larghezza × 100. La larghezza parte da 1440 px, una larghezza a cui i design 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 del rem, il vw non ha un valore predefinito, dato che il viewport è quanto è larga la finestra del lettore. Per il testo, combina il vw con il rem dentro clamp(), in modo che resti leggibile e ingrandibile. Nulla viene caricato.