Chciałbym pochwalić odpowiedź josh3736 za zapewnienie doskonałego kontekstu historycznego. Choć jest dobrze wyartykułowany, krajobraz CSS zmienił się w ciągu prawie pięciu lat, odkąd zadano to pytanie. Kiedy zadano to pytanie, px była to prawidłowa odpowiedź, ale nie jest to prawdą już dzisiaj.
tl; dr: userem
Przegląd jednostek
Historycznie pxjednostki zwykle reprezentowały jeden piksel urządzenia. W przypadku urządzeń o coraz większej gęstości pikseli nie dotyczy to już wielu urządzeń, takich jak wyświetlacz Retina firmy Apple.
remJednostki reprezentują r oot em rozmiar. To font-sizewszystko, co pasuje :root. W przypadku HTML jest to <html>element; w przypadku SVG jest to <svg>element. Domyślna wartość font-sizew każdej przeglądarce * to 16px.
W momencie pisania remjest obsługiwany przez około 98% użytkowników . Jeśli martwisz się o te 2%, przypomnę, że zapytania o media są również obsługiwane przez około 98% użytkowników .
O użyciu px
Większość przykładów CSS w Internecie wykorzystuje pxwartości, ponieważ były one de facto standardem. pt, ina teoretycznie można było zastosować wiele innych jednostek , ale nie radziły sobie one dobrze z małymi wartościami, ponieważ szybko trzeba było uciekać się do ułamków, które były dłuższe do pisania i trudniejsze do uzasadnienia.
Jeśli chcesz mieć cienką ramkę, z pxktórą możesz skorzystać 1px, ptmusisz użyć jej, aby 0.75ptuzyskać spójne wyniki, a to po prostu nie jest bardzo wygodne.
O użyciu rem
remDomyślna wartość parametru 16pxnie jest zbyt silnym argumentem za jego użyciem. Pisanie 0.0625remjest gorsze niż pisanie 0.75pt, więc dlaczego ktoś miałby z tego korzystać rem?
Istnieją dwie części remprzewagi nad innymi jednostkami.
- Preferencje użytkownika są przestrzegane
- Możesz zmienić pozorną
pxwartość remna dowolną
Poszanowanie preferencji użytkownika
Powiększenie przeglądarki bardzo się zmieniło na przestrzeni lat. Historycznie wiele przeglądarek tylko skalowało się font-size, ale zmieniło się to dość szybko, gdy strony zdały sobie sprawę, że ich piękne, idealnie pikselowe projekty psują się za każdym razem, gdy ktoś przybliża lub oddala obraz. W tym momencie przeglądarki skalują całą stronę, więc powiększanie na podstawie czcionek jest poza obrazem.
Szanowanie życzeń użytkownika nie jest wykluczone. To, że przeglądarka jest 16pxdomyślnie ustawiona , nie oznacza, że żaden użytkownik nie może zmienić swoich preferencji 24pxlub 32pxpoprawić jej niedostatecznego widzenia lub słabej widoczności (np. Odblaski ekranu). Jeśli oprzesz swoje jednostki rem, każdy użytkownik o większym rozmiarze czcionki zobaczy proporcjonalnie większą witrynę. Granice będą większe, wypełnienie będzie większe, marginesy będą większe, wszystko będzie płynnie skalować.
Jeśli oprzesz swoje zapytania o media rem, możesz także upewnić się, że witryna, którą widzą użytkownicy, pasuje do ich ekranu. Użytkownik z font-sizezestawem do 32pxna 640pxszerokim przeglądarce, będą skutecznie się widząc swoją stronę, jak pokazano użytkownikowi na 16pxna 320pxszerokim przeglądarce. Korzystanie z RWD nie wiąże się z żadnymi stratami rem.
Zmiana pozornej pxwartości
Ponieważ remopiera się na font-sizetego :rootwęzła, jeśli chcesz zmienić to, co 1remreprezentuje, wszystko co musisz zrobić, to zmienić font-size:
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Cokolwiek robisz, nie ustawić :rootelementu font-sizedo pxwartości.
Jeśli ustawisz font-sizena htmldo pxwartości, masz zdmuchnięte preferencji użytkownika bez sposób, aby je z powrotem.
Jeśli chcesz zmienić pozorną wartość rem, użyj %jednostek.
Matematyka tego jest dość prosta.
Pozorny rozmiar czcionki :rootto 16px, ale powiedzmy, że chcemy to zmienić 20px. Wszystko, co musimy zrobić, to pomnożyć 16przez pewną wartość, aby uzyskać 20.
Skonfiguruj swoje równanie:
16 * X = 20
I rozwiązać dla 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>
Robienie wszystkiego w wielokrotnościach 20nie jest wcale takie świetne, ale powszechną sugestią jest, aby pozorny rozmiar był remrówny 10px. Magiczna liczba to, 10/16co jest 0.625, lub 62.5%.
:root {
font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
Problem polega na tym, że domyślne ustawienie font-sizedla reszty strony jest zbyt małe, ale jest na to prosta poprawka: Ustaw font-sizeprzy bodyużyciu rem:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>I'm the default font-size</p>
Ważne jest, aby pamiętać, z tym korekty w miejscu, pozornej wartości remIs 10pxco oznacza dowolną wartość może masz napisane w pxmożna przekształcić bezpośrednio remprzez wstawianie miejsca dziesiętnego.
padding: 20px;
przemienia się w
padding: 2rem;
Wybrany rozmiar czcionki zależy od Ciebie, więc jeśli chcesz, nie ma powodu, dla którego nie możesz użyć:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
i mieć 1remrówne 1px.
Oto proste rozwiązanie pozwalające na poszanowanie życzeń użytkowników, przy jednoczesnym unikaniu nadmiernego komplikowania CSS.
Zaczekaj, więc co jest haczykiem?
Bałem się, że możesz o to zapytać. O ile chciałbym udawać, że remto magia i wszystko rozwiązuje, wciąż są pewne ważne kwestie. Moim zdaniem nic nie łamie interesów , ale zamierzam je zawołać, żebyś nie mógł powiedzieć, że cię nie ostrzegałem.
Zapytania o media (użycie em)
Jednym z pierwszych problemów, z którymi się spotkasz, są remzapytania o media. Rozważ następujący kod:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
Tutaj wartość remzmian zależy od tego, czy zapytanie o media ma zastosowanie, a zapytanie o media zależy od wartości rem, więc co u licha się dzieje?
remw zapytaniach o media używa początkowej wartości font-sizei nie powinien (patrz sekcja Safari) uwzględniać żadnych zmian, które mogły się wydarzyć font-sizew :rootelemencie. Innymi słowy, jego pozorną wartością jest zawsze 16px .
Jest to nieco irytujące, ponieważ oznacza to, że trzeba zrobić kilka obliczeń ułamkowych, ale stwierdziliśmy, że większość zapytań wspólne mediów korzysta już wartości, które są wielokrotnością 16.
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
Dodatkowo, jeśli korzystasz z preprocesora CSS, możesz użyć miksów lub zmiennych do zarządzania zapytaniami o media, co całkowicie zamaskuje problem.
Safari
Niestety, znany jest błąd w Safari, w którym zmiany :rootrozmiaru czcionki faktycznie zmieniają obliczone remwartości zakresów zapytań o media. Może to spowodować bardzo dziwne zachowanie, jeśli rozmiar czcionki :rootelementu zostanie zmieniony w zapytaniu o media. Na szczęście poprawka jest prosta: używaj emjednostek do zapytań o media .
Przełączanie kontekstu
Jeśli przełączasz się między różnymi projektami, całkiem możliwe, że pozorny rozmiar czcionki rembędzie miał różne wartości. W jednym projekcie może być używany pozorny rozmiar, 10pxgdzie w innym projekcie może być pozorny rozmiar 1px. Może to być mylące i powodować problemy.
Moim jedynym zaleceniem jest pozostanie przy 62.5%konwersji remdo pozornego rozmiaru 10px, ponieważ było to bardziej powszechne w moim doświadczeniu.
Udostępnione biblioteki CSS
Jeśli piszesz CSS, który będzie używany w witrynie, której nie kontrolujesz, na przykład w przypadku wbudowanego widżetu, naprawdę nie ma dobrego sposobu, aby dowiedzieć się, jaki rembędzie pozorny rozmiar . W takim przypadku możesz nadal używać px.
Jeśli nadal chcesz używać rem, rozważ wydanie wersji Sass lub LESS arkusza stylów ze zmienną, aby zastąpić skalowanie dla pozornego rozmiaru rem.
* Nie chcę nikogo odstraszyć rem, ale nie byłem w stanie oficjalnie potwierdzić, że każda przeglądarka używa 16pxdomyślnie. Widzisz, istnieje wiele przeglądarek i nie byłoby wcale tak trudno, aby jedna przeglądarka tak lekko się rozdzieliła, powiedzmy 15pxlub 18px. Podczas testowania nie widziałem jednak żadnego przykładu, w którym przeglądarka korzystająca z ustawień domyślnych w systemie korzystającym z ustawień domyślnych miała inną wartość niż 16px. Jeśli znajdziesz taki przykład, podziel się nim ze mną.
