Czy powinienem używać jednostek wartości px lub rem w swoim CSS? [Zamknięte]

375

Projektuję nową stronę internetową i chcę, aby była zgodna z jak największą liczbą przeglądarek i ustawień przeglądarki. Próbuję zdecydować, jakiej jednostki miary powinienem użyć dla rozmiarów moich czcionek i elementów, ale nie jestem w stanie znaleźć rozstrzygającej odpowiedzi.

Moje pytanie brzmi: czy mogę używać pxalbo remw moim CSS?

  • Jak dotąd wiem, że używanie pxnie jest zgodne z użytkownikami, którzy dostosowują swój podstawowy rozmiar czcionki w przeglądarce.
  • Zignorowałem ems, ponieważ są bardziej kłopotliwe w utrzymaniu, w porównaniu do rems, ponieważ kaskadowo.
  • Niektórzy twierdzą, że remsą niezależne od rozdzielczości i dlatego są bardziej pożądane. Ale inni twierdzą, że większość współczesnych przeglądarek i tak powiększa wszystkie elementy jednakowo, więc używanie pxnie stanowi problemu.

Pytam o to, ponieważ istnieje wiele różnych opinii na temat najbardziej pożądanej miary odległości w CSS i nie jestem pewien, która z nich jest najlepsza.

html css distance units-of-measurement TylerH
źródło
4
Jest to kwestia sporu, argumentacji i opinii, a nie tego rodzaju technicznych pytań, w których SO jest dobra. Nawiasem mówiąc, prawidłowa odpowiedź to „Nie” ☺
Jukka K. Korpela,
Nawet komentarz jest nieaktualny. To, że PO prosi o właściwą opinię, nie oznacza, że ​​będziemy tylko wydawać własne opinie. Prawie 8 lat później to pytanie pokazuje, że nadal interesuje się ewolucją tego tematu. Aktualne odpowiedzi są uzasadnione i wystarczająco techniczne i NIE są opiniowane. Dlatego proponuję zmienić słowo „opinia” na „doświadczenie”, abyśmy nie wpadli w pułapkę ponownego otwierania i zamykania pytania w kółko.
Tim Vermaelen
2
@TimVermaelen to pytanie zostało zamknięte tylko raz w życiu. Dokonana zmiana nie była znacząca, ponieważ odpowiedź jest nadal całkowicie zależna od kontekstu, którego nie można podać, chyba że OP zmodyfikuje pytanie, aby zapytać o konkretny scenariusz. Nie ma opcji „najlepszej” dla wszystkich przypadków, dlatego pytanie to jest oparte na opiniach.
TylerH

Odpowiedzi:

418

TL; DR: użyj px.

Fakty

  • Po pierwsze, niezwykle ważne jest, aby wiedzieć, że zgodnie ze specyfikacjąpx jednostka CSS nie jest równa jednemu fizycznemu pikselowi wyświetlania. To zawsze było prawdą - nawet w 1996 CSS 1 specyfikacji .

    CSS definiuje piksel odniesienia , który mierzy rozmiar piksela na ekranie o rozdzielczości 96 dpi. Na wyświetlaczu, który ma rozdzielczość zasadniczo różną od 96dpi (podobnie jak wyświetlacze Retina), agent użytkownika przeskalowuje pxjednostkę, tak aby jej rozmiar był zgodny z pikselem odniesienia. Innymi słowy, to ponowne skalowanie jest dokładnie powodem, dla którego 1 piksel CSS równa się 2 fizycznym pikselom wyświetlającym siatkówkę.

    To powiedziawszy, do roku 2010 (i pomimo mobilnego powiększenia) pxprawie zawsze był równy jednemu fizycznemu pikselowi, ponieważ wszystkie szeroko dostępne wyświetlacze miały około 96dpi.

  • Rozmiary określone w ems odnoszą się do elementu nadrzędnego . Prowadzi to do em„problemu łączenia”, w którym zagnieżdżone elementy stają się stopniowo większe lub mniejsze. Na przykład:

    body { font-size:20px; } 
div { font-size:0.5em; }

    Daje nam:

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

  • CSS3 rem, który jest zawsze względny tylko do htmlelementu głównego , jest teraz obsługiwany w 96% wszystkich używanych przeglądarek .

Opinia

Myślę, że wszyscy zgadzają się, że dobrze jest zaprojektować strony tak, aby były dostosowane do wszystkich i uwzględnić osoby niedowidzące. Jednym z takich czynników (ale nie jedynym!) Jest umożliwienie użytkownikom powiększenia tekstu witryny, aby ułatwić czytanie.

Na początku jedynym sposobem zapewnienia użytkownikom możliwości skalowania rozmiaru tekstu było użycie jednostek wielkości względnej (takich jak ems). Wynika to z faktu, że menu rozmiaru czcionki przeglądarki po prostu zmieniło rozmiar czcionki głównej. Dlatego jeśli określisz rozmiary czcionek px, nie będą się skalować podczas zmiany opcji rozmiaru czcionki przeglądarki.

Nowoczesne przeglądarki (a nawet niezbyt nowoczesny IE7) zmieniły domyślną metodę skalowania, aby po prostu powiększyć wszystko, w tym obrazy i rozmiary pudełek. Zasadniczo powodują, że piksel odniesienia jest większy lub mniejszy.

Tak, ktoś może jeszcze zmienić swoją przeglądarkę domyślnego arkusza stylów, aby dostosować domyślny rozmiar czcionki (odpowiednik opcji rozmiar czcionki w starym stylu), ale jest to bardzo ezoteryczny sposób idzie o to i ja bym zakład nikt 1 robi. (W Chrome jest zakopany pod zaawansowanymi ustawieniami, treściami internetowymi, rozmiarami czcionek. W IE9 jest jeszcze bardziej ukryty. Musisz nacisnąć Alt i przejść do Widok, Rozmiar tekstu.) O wiele łatwiej jest po prostu wybrać opcję Zoom w menu główne przeglądarki (lub użyj kółka myszy Ctrl+ +/ -/).

1 - oczywiście w granicach błędu statystycznego

Jeśli założymy, że większość użytkowników skaluje strony za pomocą opcji powiększenia, jednostki względne są w większości nieistotne. O wiele łatwiej jest rozwinąć stronę, gdy wszystko jest określone w tej samej jednostce (wszystkie obrazy są przetwarzane w pikselach), i nie musisz się martwić o komplikowanie. ( „Powiedziano mi, że nie będzie matematyki” - trzeba poradzić sobie z koniecznością obliczenia, na co faktycznie działa 1.5em).

Innym potencjalnym problemem związanym z używaniem tylko jednostek względnych dla rozmiarów czcionek jest to, że czcionki o zmienionych rozmiarach użytkownika mogą złamać założenia przyjęte przez układ. Może to na przykład prowadzić do przycinania lub zbyt długiego wyświetlania tekstu. Jeśli używasz jednostek bezwzględnych, nie musisz się martwić o nieoczekiwany rozmiar czcionki z powodu zepsucia układu.

Więc moją odpowiedzią jest użycie jednostek pikseli. Używam pxdo wszystkiego. Oczywiście twoja sytuacja może się różnić i jeśli musisz wspierać IE6 (niech bogowie RFC zlitują się nad tobą), i tak będziesz musiał użyć ems.

josh3736
źródło
43
Powinieneś użyć pikseli i rem. Więc nowsze przeglądarki dostają rem, a stare przeglądarki wracają do pikseli (podobnie jak WordPress 2012). Można to zautomatyzować za pomocą Sass lub Less, więc wystarczy wprowadzić wartość px i automatycznie wyprowadzić px i rem.
cchiera
63
Moją wielką sprzeczką z tym argumentem jest to, że dostosowując rozmiar czcionki i odstępy w responsywnych punktach przerwania, możesz ustawić nowy rozmiar czcionki dla elementu html, a każdy pomiar ustawiony w remu będzie się automatycznie dostosowywał, a przy px musisz pisać nowe zasady dla każdego pomiaru, który chcesz poprawić. Oczywiście prawdopodobnie konieczne będą dalsze korekty, nawet podczas korzystania z rem, ale dzięki sprytnemu planowaniu otrzymasz ogromną ilość proporcjonalnego skalowania za darmo. Powiązanie niektórych pomiarów odstępów między polami z typem, lżejszym kodem i mniejszą złożonością / większą łatwością obsługi jest dla mnie oczywistą wygraną.
RobW,
16
Zakładanie, że żaden użytkownik nie zmienia ustawienia rozmiaru czcionki, jest dość odważne. Takie roszczenie powinno być poparte danymi. W przeciwnym razie jest to tylko sposób na wyobcowanie niektórych użytkowników, którzy są już delikatni (ppl z dużym niedowidzeniem). Jeśli możesz, użyj rem zamiast px. IMO, aplikacje powinny mieć możliwość niezależnego skalowania interfejsu i rozmiaru czcionki. „Po prostu użyj px” to to, co wielu deweloperów zmagających się z problemem ems chce usłyszeć, ale nie jest to odpowiednia odpowiedź dla sieci.
Olivvv,
18
Byłoby wspaniale podjąć dalsze działania w tej sprawie. Rem ma teraz wsparcie na poziomie 95% +.
Nauka statystyk przez przykład
10
Źle, nie dbam o IE (nikt nie powinien).
Vahid Amiri
193

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>
Rozwiń fragment kodu

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>
Rozwiń fragment kodu

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>
Rozwiń fragment kodu

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>
Rozwiń fragment kodu

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ą.

zzzzBov
źródło
Wiem, że to jest późno, ale podoba mi się sposób korzystania z REM, ale mam największy problem z używaniem remu, gdy używam matrix()z javascript, który jest tłumaczeniem macierzowym używają wartości translacji px(popraw mnie, jeśli się mylę), i jestem tak pomylony z tym .
Ampersanda
3
@Ampersanda, w JavaScript będziesz w dużej mierze używać obliczonych wartości pikseli. Moje zalecenie to przełączanie klas tam, gdzie to możliwe, aby CSS mógł zarządzać wyglądem rzeczy. W przypadku niektórych rzeczy nie będziesz w stanie uniknąć używania JS do obliczania wartości pikseli, więc najlepiej jest obliczyć wartość pikseli ze stanu DOM.
zzzzBov
Rozumiem, więc muszę, getComputedStyle()ale wynik jest zawsze w pikselach, więc muszę podzielić wynik przez remwartość (jak 16). CMIIW
Ampersanda
@Ampersanda tylko wtedy, gdy faktycznie generujesz remwartość, jeśli masz już poprawną pxwartość, nie musisz przełączać się na remjednostki dla rzeczy, które są już obliczone dla danego kontekstu.
zzzzBov
mają 1rem równy 1px Powoduje to problemy z powodu minimalnego rozmiaru czcionki Chrome: stackoverflow.com/questions/44378664/... stackoverflow.com/questions/24200797/...
Paul
44

Ten artykuł opisuje całkiem dobrze plusy i minusy px, emi rem.

Autor w końcu dochodzi do wniosku, że najlepszą metodą jest prawdopodobnie użycie obu pxi rem, deklarując pxnajpierw dla starszych przeglądarek i ponownie remdla nowych przeglądarek:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
uzyn
źródło
1
Tak, przede wszystkim zainteresowało mnie rem. Dwie rzeczy, których nie rozumiem: radzi tylko jako jednostkę miary dla czcionek (a nie elementów), a jeśli dobrze go rozumiem, jedynym prawdziwym powodem użycia (r) em jest to, aby użytkownicy IE mogli zmienić rozmiar tekstu?
1
@Samuel Uważam, że tak. Jeśli nie do zmiany rozmiaru tekstu, myślę, że wolelibyśmy używać px. Jeśli chodzi o jednostkę dla elementów, trzymanie się pxbyłoby lepsze, ponieważ zwykle chcesz precyzyjnie dopasować rozmiar elementów.
uzyn
Ale jeśli to zrobisz, jakiekolwiek ustawienie przeglądarki, które redefiniuje podstawowy rozmiar czcionki, zepsułoby twój układ, prawda? Dlaczego nie rem na wszystko?
1
Jak zauważono tutaj w wielu komentarzach , powodem, dla którego potrzebowaliśmy porzucić, pxjest umożliwienie zmiany rozmiaru. Teraz, jeśli korzystamy rem, nadal musimy zapewnić pxrezerwę (w starszych przeglądarkach). Zasadniczo oznacza to, że pxzmiana rozmiaru wsparcia jest lepsza niż rem. Nowsze przeglądarki obsługują pxzmianę rozmiaru, a dla starszych przeglądarek w dowolny sposób, do którego będziemy wracać px. Teraz, bazując na świetle tego wniosku, jestem bardzo zainteresowany wiedząc, po co korzystać rem? Jeśli widzę światło na końcu tunelu.
fusionstrings
3
Nie ma gwarancji, że wartości takie jak 62,5% = 10px. Jest to prawdą tylko wtedy, gdy domyślny rozmiar czcionki przeglądarki został ustawiony na 16 pikseli. Chociaż jest to ustawienie domyślne, nie jest to gwarantowane.
cimmanon
7

Jako odpowiedź odruchową zaleciłbym użycie rem, ponieważ pozwala to zmienić „poziom powiększenia” całego dokumentu na raz, jeśli to konieczne. W niektórych przypadkach, jeśli chcesz, aby rozmiar był względny względem elementu nadrzędnego, użyj em.

Ale wsparcie rem jest nierówne, IE8 potrzebuje wypełniania, a Webkit wyświetla błąd. Co więcej, obliczenia subpikselowe mogą czasami powodować znikanie linii, takich jak linie jednego piksela. Rozwiązaniem jest kodowanie w pikselach dla tak bardzo małych elementów. To wprowadza jeszcze większą złożoność.

Ogólnie rzecz biorąc, zadaj sobie pytanie, czy warto - jak ważna i prawdopodobna jest zmiana „poziomu powiększenia” całego dokumentu w CSS?

W niektórych przypadkach tak, w niektórych przypadkach nie.

To zależy od twoich potrzeb i musisz rozważyć zalety i wady, ponieważ użycie rem i em wprowadza dodatkowe uwagi w porównaniu do „normalnego” przepływu pracy opartego na pikselach.

Pamiętaj, że łatwo jest zmienić (a raczej przekonwertować) CSS z px na rem (JavaScript to inna historia), ponieważ następujące dwa bloki kodu CSS dałyby ten sam wynik:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}
html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}
Rolf
źródło
6

Tak, REM i PX są względne, ale inne odpowiedzi sugerują, aby wybrać REM zamiast PX, chciałbym również wykonać kopię zapasową na przykładzie dostępności.
Gdy użytkownik ustawia inny rozmiar czcionki w przeglądarce, REM automatycznie skaluje w górę i w dół elementy, takie jak czcionki, obrazy itp. Na stronie internetowej, co nie ma miejsca w PX.

W poniższym gif tekst po lewej stronie jest ustawiany za pomocą jednostki REM wielkości czcionki, natomiast czcionka po prawej stronie jest ustawiana przez jednostkę PX.

wprowadź opis zdjęcia tutaj

Jak widać, REM skaluje się automatycznie w górę / w dół, gdy zmieniam domyślny rozmiar czcionki strony internetowej. (Prawy dolny róg)

Domyślny rozmiar czcionki strony to 16px, co jest równe 1 rem (tylko dla domyślnej strony HTML, tj. html{font-size:100%}), Więc 1,25rem jest równy 20px.

PS: kto jeszcze korzysta z REM? Szkielety CSS! jak Bootstrap 4, Bulma CSS itp., więc lepiej się z tym pogódź.

JerryGoyal
źródło
3

Odpowiedź josh3736 jest dobra, ale 3 lata później stanowi kontrapunkt:

Polecam używanie remjednostek dla czcionek, choćby dlatego, że ułatwia ciebie , autora, do wielkości zmiany. Prawdą jest, że użytkownicy bardzo rzadko zmieniają domyślny rozmiar czcionki w swoich przeglądarkach, a nowoczesne powiększenie przeglądarki skaluje pxjednostki. Ale co, jeśli twój szef do ciebie przyjdzie i powie „nie powiększaj obrazów ani ikon, ale powiększ wszystkie czcionki”. O wiele łatwiej jest po prostu zmienić rozmiar czcionki głównej i pozwolić wszystkim pozostałym czcionkom przeskalować się względem tego, a następnie zmienić pxrozmiary w dziesiątkach lub setkach reguł css.

Myślę, że nadal warto stosować pxjednostki dla niektórych obrazów lub dla niektórych elementów układu, które zawsze powinny mieć ten sam rozmiar, niezależnie od skali projektu.

Caniuse.com mógł powiedzieć, że tylko 75% przeglądarek, kiedy josh3736 opublikował swoją odpowiedź w 2012 roku, ale 27 marca deklaruje wsparcie na poziomie 93,78% . Tylko IE8 nie obsługuje go wśród przeglądanych przeglądarek.

Joshua Carmody
źródło
1
Only IE8 doesn't support it among the browsers they track.Co? Połączona strona stwierdza, że „IE9 i IE10 nie obsługują jednostek rem, gdy są używane we właściwości skrótu czcionek lub w przypadku pseudoelementów. IE9, 10 i 11 nie obsługują jednostek rem, gdy są używane we właściwości wysokości linii, gdy są używane na: przed i po pseudoelementach. Granice wielkości w rem znikają, gdy strona jest pomniejszona w Chrome. Nie działa w przeglądarce Samsung Note II Android 4.3 i Samsung Galaxy Tab 2 w Androidzie 4.2. W Chrome 31-34 i systemie Android z Chrome (jak 4.4) występuje błąd rozmiaru czcionki, gdy element główny ma rozmiar procentowy. ”
e-sushi
Również związane z Twoim as of March 27 they claim 93.78% support.W momencie pisania tego komentarza caniuse pokazuje jedynie 91,79% pełnej obsługi przeglądarki. Patrząc na swój procent, jestem pewien, że uwzględniłeś także obsługę błędnych przeglądarek (obecnie 2,8%, co można interpretować jako optymistyczne 94,6% ogólnego zasięgu - ale faktem jest, że te 2,8% ma wadliwe, niekompletne lub nawet całkowicie brak wsparcia ... jak zauważono w moim poprzednim komentarzu: każdy błąd jest wynikiem innej wersji przeglądarki i kombinacji systemu operacyjnego.) Możesz odpowiednio poprawić swoją odpowiedź ...
e-sushi
1

Znalazłem najlepszy sposób na zaprogramowanie rozmiarów czcionek na stronie internetowej, aby zdefiniować podstawowy rozmiar czcionki dla, bodya następnie użyć em (lub rem) dla każdej innej font-sizedeklarowanej później. Wydaje mi się, że to osobiste preferencje, ale dobrze mi to służyło, a także umożliwiło włączenie bardziej responsywnego projektu .

Jeśli chodzi o korzystanie z jednostek rem, myślę, że dobrze jest znaleźć równowagę między postępem w kodzie, ale także zaoferować wsparcie dla starszych przeglądarek. Sprawdź ten link na temat obsługi przeglądarek dla jednostek rem , które powinny pomóc w podjęciu właściwej decyzji.

cereallarceny
źródło
Ok. Ale responsywne projektowanie jest równie łatwe do wykonania przy użyciu jednostek px, po prostu (po prostu pisz zapytania o media na podstawie px zamiast em)?
Możesz jednak, jeśli chcesz zmniejszyć rozmiar czcionki, ponieważ szerokość obszaru wyświetlania witryny jest mniejsza, możesz zmienić bodyrozmiar czcionki i wszystko się zmienia.
cereallarceny
Naprawdę nie martwię się o obsługę przeglądarki. Dodam tylko zapasowy rozmiar piksela dla wszystkich rozmiarów, aby starsze przeglądarki mogły coś zinterpretować.
Następnie przejdź do progresywnej drogi, używając remów. Tak długo, jak zapewniacie awarię, nie widzę żadnej szkody. Wydaje mi się, że to po prostu dodatkowa praca, ale może nie w twojej sytuacji.
cereallarceny
0

ptjest podobny do tego rem, że jest względnie naprawiony, ale prawie zawsze niezależny od DPI, nawet jeśli niezgodne przeglądarki traktują pxw sposób zależny od urządzenia. remróżni się w zależności od rozmiaru czcionki elementu głównego, ale możesz użyć czegoś takiego jak Sass / Compass, aby zrobić to automatycznie pt.

Jeśli miałeś to:

html {
    font-size: 12pt;
}

wtedy 1remzawsze będzie 12pt. remi emsą tak niezależne od urządzenia, jak elementy, na których polegają; niektóre przeglądarki nie zachowują się zgodnie ze specyfikacją i traktują pxdosłownie. Nawet w dawnych czasach Internetu, 1 punkt był konsekwentnie uważany za 1/72 cala - to znaczy 72 punkty na cal.

Jeśli masz starą, niezgodną przeglądarkę i masz:

html {
    font-size: 16px;
}

następnie 1rembędzie uzależnione od urządzenia. W przypadku elementów, które htmldomyślnie dziedziczyłyby , 1emzależałyby również od urządzenia. 12ptbyłby, miejmy nadzieję , odpowiednikiem niezależnym od urządzenia: 16px / 96px * 72pt = 12ptgdzie 96px = 72pt = 1in.

Wykonywanie matematyki może być bardzo skomplikowane, jeśli chcesz trzymać się określonych jednostek. Na przykład .75em of html = .75rem = 9pti .66em of .75em of html = .5rem = 6pt. Dobra zasada praktyczna:

  • Użyj ptdo absolutnych rozmiarów. Jeśli naprawdę potrzebujesz dynamiki w stosunku do elementu głównego, pytasz o zbyt wiele CSS; potrzebujesz języka kompilującego się do CSS, takiego jak Sass / SCSS.
  • Użyj emdo względnych rozmiarów. Łatwo jest powiedzieć: „Chcę, aby margines po lewej stronie był mniej więcej na maksymalnej szerokości litery”, lub „Spraw, aby tekst tego elementu był nieco większy niż jego otoczenie”. <h1>jest dobrym elementem do użycia rozmiaru czcionki w ems, ponieważ może pojawiać się w różnych miejscach, ale zawsze powinien być większy niż tekst w pobliżu. W ten sposób nie musisz mieć osobnego rozmiaru czcionki dla każdej zastosowanej klasy h1: rozmiar czcionki dostosuje się automatycznie.
  • Użyj pxdo bardzo małych rozmiarów. Przy bardzo małych rozmiarach ptmoże się rozmywać w niektórych przeglądarkach przy 96 DPI, ponieważ pti pxnie do końca są w linii. Jeśli chcesz po prostu utworzyć cienką, jednopikselową ramkę, powiedz tak. Jeśli masz wyświetlacz o wysokiej rozdzielczości, nie będzie to dla ciebie oczywiste podczas testowania, więc w pewnym momencie należy przetestować na standardowym wyświetlaczu o rozdzielczości 96 DPI.
  • Nie zajmuj się subpikselami, aby upodobać sobie rzeczy na wyświetlaczach o wysokiej DPI. Niektóre przeglądarki mogą to obsługiwać - szczególnie na wyświetlaczach o wysokiej rozdzielczości - ale nie jest to niemożliwe. Większość użytkowników woli duże i wyraźne, chociaż sieć nauczyła nas programistów inaczej. Jeśli chcesz dodać użytkownikom szczegółowe informacje dzięki najnowocześniejszym ekranom, możesz użyć grafiki wektorowej (czytaj: SVG), co i tak powinieneś robić.
Zenexer
źródło
1
pt jest przeznaczony do mediów drukowanych i nigdy nie powinien być używany do ekranów
sf
@sf CSS definiuje pt i px tak, aby zawsze miały ten sam współczynnik, mimo że użycie tych terminów nie jest technicznie dokładne (72pt = 96px = 1 cal). W rzeczywistości w CSS px nie jest tak naprawdę pikselem jednego urządzenia. Na moim ekranie 1px to 2 piksele urządzenia. Zaletą używania pt w stosunku do px jest to, że można łatwo określić rozmiary elementów w stosunku do rozmiarów związanych z tekstem.
Zenexer,
-2

Połowa (ale tylko połowa) snarky odpowiedź (druga połowa to gorzka pogarda dla rzeczywistości biurokracji):

Użyj vh

Wszystko jest zawsze dopasowane do okna przeglądarki.

Zawsze zezwalaj na przewijanie w dół, nigdy w bok.

Ustaw szerokość ciała na statyczną 50vh i nic nie unosi się ani nie wybija z nadrzędnego div. Stylizuj tylko za pomocą stołów, aby wszystko było sztywno ustawione zgodnie z oczekiwaniami. Dołącz funkcję javascript, aby cofnąć dowolną czynność Ctrl +/-, którą może wykonać użytkownik.

Wszyscy będą cię nienawidzić, z wyjątkiem ludzi, którzy każą ci dopasowywać rzeczy do ich makiety, a oni będą zachwyceni. I wszyscy wiedzą, że ich opinia jest jedyną, która się liczy.

liljoshu
źródło
-3

Tak. A raczej nie.

To znaczy, to nie ma znaczenia. Użyj tego, który ma sens dla twojego konkretnego projektu. PX i EM lub oba są równie ważne, ale będą się nieco różnić w zależności od ogólnej architektury CSS strony.

AKTUALIZACJA:

Aby to wyjaśnić, stwierdzam, że zwykle nie ma znaczenia, którego używasz. Czasami możesz chcieć wybrać jedną z nich. EM są fajne, jeśli możesz zacząć od zera i chcesz użyć podstawowego rozmiaru czcionki i dopasować wszystko do tego.

PX są często potrzebne, gdy modernizujesz przeprojektowanie do istniejącej bazy kodu i potrzebujesz specyfiki px, aby uniknąć problemów z zagnieżdżaniem.

DA.
źródło
Więc twoja odpowiedź jest taka, że ​​to nie ma znaczenia? A może istnieją sytuacje, w których ceniłbyś jedną nad drugą? A jeśli tak, w jakich sytuacjach tak by się stało?
@Samuel tak, może się zdarzyć, że będziesz chciał użyć jednego lub drugiego. Zaktualizowałem odpowiedź o więcej informacji.
DA.
Przepraszam, ale trochę się pomyliłem z oryginalnym brzmieniem. To znaczy, że masz REM w tytule i EM w ciele. Wygląda na to, że pytasz o REM. Odpowiedź jest nadal prawie taka sama, ale REM ma kilka dodatkowych zalet do rozważenia, ale jest głównie używana tak samo jak EM - pozwala na użycie „podstawowej” wielkości czcionki.
DA.
Dlaczego „są [...] fajni, jeśli możesz zacząć od zera i chcesz użyć podstawowego rozmiaru czcionki i dopasować wszystko do tego ” . Jaka jest przewaga (r) em nad px? Czy to znaczy, że użytkownicy IE mogą zmieniać rozmiar tekstu, czy też istnieją inne zalety w stosunku do px (co wydaje się prostsze)?
EM i REM mają tę samą zaletę: możesz ustawić HTML lub BODY na określony rozmiar czcionki (powiedzmy 10px), a następnie ustawić wszystko inne jako EM lub REM. W ten sposób, jeśli chcesz, aby cały typ był proporcjonalnie większy, po prostu zmień ten początkowy styl 10px na 11px. Było to o wiele bardziej przydatne 5 lat temu, kiedy wszyscy budowaliśmy własne niestandardowe widżety zmiany rozmiaru czcionek oparte na JS. Obecnie przeglądarki lepiej sobie radzą z powiększaniem (zwłaszcza na urządzeniach mobilnych), dlatego uważam, że jest to znacznie mniej korzystne. Jeśli uważasz, że PX jest prostsze, to jest to dla ciebie korzyść i na pewno ważny powód, aby przejść do PX.
DA.
-4

em jest drogą naprzód, nie tylko dla czcionek, ale możesz ich używać z ramkami, grubością linii i innymi rzeczami, dlaczego?

Mówiąc wprost, tylko one są skalowane zgodnie z klawiszami alt + i alt- w przeglądarce w celu powiększania.

Inne pomiary są skalowane, ale nie tak czysto jak em.

Na marginesie, jeśli chcesz uzyskać najlepsze skalowanie, również w miarę możliwości przekonwertuj swoją grafikę do SVG opartego na wektorze, ponieważ będą one również skalować się przy współczynniku powiększenia przeglądarki.

shawty
źródło
3
Ale większość przeglądarek obecnie powiększa wszystkie elementy strony jednakowo (chyba że dostosujesz podstawowy rozmiar czcionki), więc korzyść z używania (r) nie jest prawdziwa w przypadku nowoczesnych przeglądarek, prawda?
Jest i nie jest, podczas gdy poprawne w tym, co mówisz, bardziej dotyczy współczynnika skalowania, a nie delty skalowania. Delta będzie zawsze jednolita, niezależnie od zastosowanego pomiaru, ale współczynnik skali (pod warunkiem, że matematyka zostanie wykonana poprawnie) dostosuje się w razie potrzeby, powiedzmy, monitor panoramiczny w porównaniu ze standardowym monitorem lub piksele prostokątne w porównaniu do pikseli kwadratowych. Ponieważ remy są w rzeczywistości oparte na prawdziwych pomiarach drukarek, wówczas skalowanie zawsze będzie lepiej pasować, inne (np.%) Często są w najlepszym razie przesunięciem delta
cholerny
(ciąg dalszy) z mnożeniem stosowanym w obu kierunkach, w wyniku czego może w niektórych przypadkach dawać bardzo nieproporcjonalny współczynnik oglądania.
shawty
2
„Mówiąc wprost, tylko one są skalowane zgodnie z klawiszami alt + i alt- w przeglądarce w celu powiększania”. = to jest niepoprawne.
DA.
Ok, żebym mógł to lepiej sformułować, zobacz mój poprzedni komentarz dotyczący korekty.
shawty
-5

EM są TYLKO rzeczą, która skaluje się w przypadku zapytań o media, które obsługują skalowanie +/-, które ludzie robią cały czas, nie tylko osoby niewidome. Oto kolejna bardzo dobrze napisana profesjonalna demonstracja, dlaczego to tak ważne.

Nawiasem mówiąc, właśnie dlatego Zurb Foundation używa ems , podczas gdy gorszy Bootstrap 3 nadal używa pikseli.

robmuh
źródło
2
To naprawdę nie jest poprawne. W dawnych czasach pikseli nie można było powiększać w starych wersjach IE. +/- wykonuje teraz pełne powiększenie strony we wszystkich obecnych przeglądarkach, więc to nie jest problem. Ponadto to pytanie dotyczy remów, a nie px - nie em vs px.
Rich Bradshaw,
1
Rozśmieszacie mnie. Czy próbowałeś nawet skalować swoją witrynę za pomocą +/- za pomocą pikseli? Zapis dotyczący pikseli, które mają być powiększane, jest całkowicie błędny. Głosuj w dół, ile chcesz. Głosy nie zmieniają rzeczywistości.
robmuh
1
Być może zajmujemy się nieco innymi rzeczami - czy jest szansa, że ​​możesz wystawić prostą wersję demonstracyjną, aby pokazać różnicę?
Rich Bradshaw,
Nie sądzę, aby pytanie dotyczyło jednostek, które należy stosować w zapytaniach medialnych…
binki