Vorrei lodare la risposta di josh3736 per aver fornito un eccellente contesto storico. Sebbene sia ben articolato, il panorama CSS è cambiato in quasi cinque anni da quando è stata posta questa domanda. Quando è stata posta questa domanda, è px stata la risposta corretta, ma oggi non è più valida.
tl; dr: userem
Panoramica dell'unità
Storicamente le pxunità rappresentavano in genere un pixel del dispositivo. Con i dispositivi con densità di pixel sempre più alta, ciò non vale più per molti dispositivi, come ad esempio il display Retina di Apple.
remunità rappresentano la r oot em dimensioni. È quello font-sizedi qualunque partita :root. Nel caso di HTML, è l' <html>elemento; per SVG, è l' <svg>elemento. L'impostazione predefinita font-sizein ogni browser * è 16px.
Al momento della scrittura, remè supportato da circa il 98% degli utenti . Se siete preoccupati che altro 2%, ti ricordo che le media query sono anche supportati da circa il 98% degli utenti .
Sull'utilizzo px
La maggior parte degli esempi CSS su Internet usa pxvalori perché erano lo standard di fatto. pt, ine in teoria avrebbero potuto essere utilizzate varie altre unità , ma non gestivano bene i piccoli valori poiché avresti rapidamente bisogno di ricorrere a frazioni, che erano più lunghe da digitare e più difficili da ragionare.
Se volessi un bordo sottile, con pxcui potresti usare 1px, con ptcui dovresti usare 0.75ptper risultati coerenti, e questo non è molto conveniente.
Sull'utilizzo rem
remIl valore predefinito di 16pxnon è un argomento molto forte per il suo utilizzo. Scrivere 0.0625remè peggio che scrivere 0.75pt, quindi perché qualcuno dovrebbe usarlo rem?
Vi sono due parti a remvantaggio rispetto ad altre unità.
- Le preferenze dell'utente sono rispettate
- Puoi modificare il
pxvalore apparente di remcome preferisci
Rispetto delle preferenze dell'utente
Lo zoom del browser è cambiato molto nel corso degli anni. Storicamente molti browser si font-sizeingrandivano, ma questo cambiava molto rapidamente quando i siti Web si rendevano conto che i loro meravigliosi design perfetti per i pixel si stavano rompendo ogni volta che qualcuno ingrandiva o riduceva. A questo punto, i browser ridimensionano l'intera pagina, quindi lo zoom basato sui caratteri è fuori dall'immagine.
Il rispetto dei desideri di un utente non è da escludere. Solo perché un browser è impostato per 16pximpostazione predefinita, non significa che nessun utente non possa modificare le proprie preferenze 24pxo 32pxcorreggerle per ipovisione o scarsa visibilità (ad es. Abbagliamento dello schermo). Se si basano le proprie unità su rem, qualsiasi utente con una dimensione del carattere superiore vedrà un sito proporzionalmente più grande. I bordi saranno più grandi, l'imbottitura sarà più grande, i margini saranno più grandi, tutto si espanderà fluidamente.
Se si basano le query multimediali rem, è anche possibile assicurarsi che il sito visualizzato dagli utenti sia adatto allo schermo. Un utente font-sizeimpostato 32pxsu un 640pxampio browser, visualizzerà effettivamente il tuo sito come mostrato a un utente 16pxsu un 320pxampio browser. Non c'è assolutamente alcuna perdita per RWD nell'uso rem.
Modifica del pxvalore apparente
Poiché remsi basa su font-sizedel :rootnodo, se si desidera modificare ciò che 1remrappresenta, è sufficiente modificare font-size:
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Qualunque cosa tu faccia, non impostare l' :rootelemento font-sizesu un pxvalore.
Se si imposta il font-sizesu htmlper un pxvalore di, hai spazzato via le preferenze dell'utente senza un modo per farli tornare.
Se si desidera modificare il valore apparente di rem, utilizzare le %unità.
La matematica per questo è ragionevolmente semplice.
L'apparente dimensione del carattere :rootè 16px, ma diciamo che vogliamo cambiarlo in 20px. Tutto quello che dobbiamo fare è moltiplicare 16per un valore per ottenere 20.
Imposta la tua equazione:
16 * X = 20
E risolvi per X:
X = 20 / 16
X = 1.25
X = 125%
:root {
font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
Fare tutto in multipli di 20non è poi così eccezionale, ma un suggerimento comune è di rendere remuguale la dimensione apparente 10px. Il numero magico per quello è 10/16quale è 0.625, o 62.5%.
:root {
font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
Il problema ora è che l'impostazione predefinita font-sizeper il resto della pagina è impostata su un valore troppo piccolo, ma esiste una soluzione semplice per questo: Impostare un font-sizeon bodyusando rem:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>I'm the default font-size</p>
È importante notare che, con questa correzione in atto, il valore apparente di remè il 10pxche significa che qualsiasi valore in cui potresti aver scritto pxpuò essere convertito direttamente in remun punto decimale.
padding: 20px;
diventa
padding: 2rem;
La dimensione del carattere apparente che scegli dipende da te, quindi se vuoi non c'è motivo per cui non puoi usare:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
e avere 1remuguale 1px.
Quindi il gioco è fatto, una soluzione semplice per rispettare i desideri degli utenti evitando anche di complicare eccessivamente il CSS.
Aspetta, allora qual è il trucco?
Temevo che potessi chiederlo. Per quanto mi piacerebbe fingere che remsia magia e risolva tutto, ci sono ancora alcune questioni degne di nota. Secondo me nulla di sconvolgente , ma li chiamerò in modo da non poter dire che non ti avevo avvertito.
Media query (uso em)
Uno dei primi problemi con cui ti imbatterai remriguarda le query multimediali. Considera il seguente codice:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
Qui il valore delle remmodifiche dipende dall'applicazione della media query e dalla media query dipende dal valore di rem, quindi cosa sta succedendo?
remin media query utilizza il valore iniziale di font-sizee non dovrebbe (vedi sezione Safari) tener conto di eventuali cambiamenti che possono avere successo al font-sizedi :rootelemento. In altre parole, il suo valore apparente è sempre 16px .
Questo è un po 'fastidioso, perché significa che devi fare alcuni calcoli frazionari, ma ho scoperto che le media query più comuni usano già valori multipli di 16.
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
Inoltre, se si utilizza un preprocessore CSS, è possibile utilizzare mixin o variabili per gestire le query multimediali, che maschereranno completamente il problema.
Safari
Sfortunatamente esiste un bug noto con Safari in cui le modifiche alla :rootdimensione del carattere cambiano effettivamente i remvalori calcolati per gli intervalli di query multimediali. Ciò può causare un comportamento molto strano se la dimensione del carattere :rootdell'elemento viene modificata all'interno di una query multimediale. Fortunatamente la correzione è semplice: utilizzare le emunità per le query multimediali .
Cambio di contesto
Se si passa da un progetto all'altro, è possibile che la dimensione del carattere apparente remabbia valori diversi. In un progetto, potresti usare una dimensione apparente di 10pxdove in un altro progetto potrebbe essere la dimensione apparente 1px. Questo può essere fonte di confusione e causare problemi.
La mia unica raccomandazione qui è di attenermi 62.5%alla conversione remin una dimensione apparente di 10px, perché questo è stato più comune nella mia esperienza.
Librerie CSS condivise
Se stai scrivendo CSS che verrà utilizzato su un sito che non controlli, come per un widget incorporato, non c'è davvero alcun buon modo per sapere quale dimensione apparente remavrà. In questo caso, sentiti libero di continuare a usarlo px.
Se vuoi comunque usarlo rem, considera di rilasciare una versione Sass o LESS del foglio di stile con una variabile per sovrascrivere il ridimensionamento per la dimensione apparente di rem.
* Non voglio allontanare nessuno dall'uso rem, ma non sono stato in grado di confermare ufficialmente che ogni browser utilizza 16pxper impostazione predefinita. Vedete, ci sono molti browser e non sarebbe così difficile per un browser divergere così leggermente, diciamo 15pxo 18px. Nei test, tuttavia, non ho visto un singolo esempio in cui un browser che utilizzava le impostazioni predefinite in un sistema che utilizzava le impostazioni predefinite aveva un valore diverso da 16px. Se trovi un esempio del genere, ti preghiamo di condividerlo con me.
