Słyszałem, że powinieneś zdefiniować rozmiary i odległości w arkuszu stylów za pomocą em zamiast w pikselach. Pytanie brzmi: dlaczego powinienem używać em zamiast px podczas definiowania stylów w css? Czy istnieje dobry przykład, który to ilustruje?

Błędem jest twierdzenie, że jeden jest lepszym wyborem niż drugi (lub oba nie zostałyby określone w specyfikacji). Warto nawet zauważyć, że StackOverflow szeroko wykorzystuje jednostki px. To nie jest zły wybór, jak mówiono Spoike.

Definicja jednostek

• px jest bezwzględną jednostką miary (np. in , pt lub cm ), która również wynosi 1/96 jednostki in (więcej o tym, dlaczego później). Ponieważ jest to pomiar bezwzględny, można go użyć za każdym razem, gdy chcesz zdefiniować coś jako określony rozmiar, a nie być proporcjonalny do czegoś innego, jak na przykład rozmiar okna przeglądarki lub rozmiar czcionki.

  Podobnie jak wszystkie inne jednostki bezwzględne, jednostki px nie są skalowane zgodnie z szerokością okna przeglądarki. Dlatego jeśli cały projekt strony używa jednostek bezwzględnych, takich jak px, a nie % , nie dostosuje się do szerokości przeglądarki. Nie jest to z natury dobre ani złe, to tylko wybór, którego projektant musi dokonać między przyleganiem do dokładnego rozmiaru a byciem nieelastycznym w stosunku do rozciągania, ale przy tym nie przyleganiem do dokładnego rozmiaru. Typowe dla witryny byłoby połączenie obiektów o stałym i elastycznym rozmiarze.

  Elementy o stałym rozmiarze często wymagają włączenia na stronę - takie jak banery reklamowe, logo lub ikony. To gwarantuje, że prawie zawsze potrzebujesz przynajmniej niektórych pomiarów w pikselach w projekcie. Na przykład obrazy będą (domyślnie) skalowane w taki sposób, że każdy piksel ma rozmiar 1 * px *, więc jeśli projektujesz wokół obrazu, potrzebujesz jednostek px . Jest również bardzo przydatny do precyzyjnego dostosowywania czcionek i do szerokości obramowania, gdzie ze względu na zaokrąglenie najbardziej sensowne jest użycie jednostek px na większości ekranów.

  Wszystkie absolutne pomiary są ze sobą ściśle powiązane; to znaczy, że 1 cal to zawsze 96px , podobnie jak 1 cal to zawsze 72pkt . (Pamiętaj, że 1 cal prawie nigdy nie jest fizycznym calem, gdy mówimy o mediach ekranowych). Wszystkie pomiary bezwzględne Zakładamy nominalną rozdzielczość ekranu 96ppi i nominalnej odległości widzenia monitora stacjonarnego, a na takim ekranie jeden px będzie równa jednej fizycznej piksela na ekranie i jeden wbędzie równa 96 fizycznym pikselom. Na ekranach, które różnią się znacznie gęstością pikseli lub odległością oglądania, lub jeśli użytkownik powiększył stronę za pomocą funkcji powiększania w przeglądarce, px niekoniecznie będzie odnosić się do pikseli fizycznych.

• em nie jest jednostką absolutną - jest to jednostka zależna od aktualnie wybranego rozmiaru czcionki. O ile nie zastąpiłeś stylu czcionki, ustawiając rozmiar czcionki za pomocą jednostki bezwzględnej (takiej jak px lub pt ), na wybór czcionki w przeglądarce użytkownika lub systemie operacyjnym wpłynie ten wybór, więc nie ma to sensu aby użyć ich jako ogólnej jednostki długości, chyba że chcesz, aby skalowała się wraz ze skalowaniem rozmiaru czcionki.

  Użyj ich, jeśli chcesz, aby rozmiar czegoś zależał od bieżącego rozmiaru czcionki.

• % jest również jednostką względną, w tym przypadku, względem wysokości lub szerokości elementu rodzica. Stanowią dobrą alternatywę dla jednostek px dla rzeczy takich jak całkowita szerokość projektu, jeśli twój projekt nie opiera się na określonych rozmiarach pikseli w celu ustawienia jego rozmiaru.

  Użycie % jednostek w projekcie umożliwia dostosowanie projektu do szerokości ekranu / urządzenia, natomiast użycie jednostki bezwzględnej, takiej jak px , nie.

Mam małego laptopa o wysokiej rozdzielczości i muszę uruchomić Firefoksa z powiększeniem 120% tekstu, aby móc czytać bez mrużenia oczu.

Wiele witryn ma z tym problemy. Cały układ jest zniekształcony, tekst w przyciskach jest przecięty na pół lub całkowicie znika. Cierpi na tym nawet stackoverflow.com:

Zwróć uwagę, w jaki sposób górne przyciski i zakładki strony nakładają się. Gdyby użyli jednostek em zamiast px, nie byłoby problemu.

Powodem, dla którego zadałem to pytanie, było to, że zapomniałem, jak ich używać, ponieważ hakowałem szczęśliwie w CSS. Ludzie nie zauważyli, że mam ogólne pytanie, ponieważ nie mówiłem o doborze czcionek per se. Bardziej interesowało mnie, jak zdefiniować style w danym elemencie bloku na stronie.

Jak zauważyli Henrik Paul i inni, jest on proporcjonalny do rozmiaru czcionki użytej w elemencie. Powszechną praktyką jest definiowanie rozmiarów elementów blokowych w px, jednak zmiana rozmiaru czcionek w przeglądarkach zwykle psuje ten projekt. Zmiana rozmiaru czcionek odbywa się zwykle za pomocą klawiszy skrótu Ctrl+ +lub Ctrl+ -. Dlatego dobrą praktyką jest używanie ich zamiast nich.

Użycie px do zdefiniowania szerokości

Oto ilustrujący przykład. Załóżmy, że mamy tag div, który chcemy zmienić w stylowe pole daty, możemy mieć kod HTML, który wygląda następująco:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

Prosta implementacja definiowałaby szerokość date-boxklasy w px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

Problem

Jeśli jednak chcemy powiększyć tekst w przeglądarce, projekt się zepsuje. Tekst będzie również krwawił poza ramką, co jest prawie takie samo, jak dzieje się z projektem SO, jak wskazuje flodin . Wynika to z faktu, że pole pozostanie tego samego rozmiaru co szerokość, ponieważ jest zablokowane 50px.

Zamiast tego używam ich

Zamiast tego lepiej jest zdefiniować szerokość w ems:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

W ten sposób masz płynny wzór na polu daty, tzn. Pole powiększy się wraz z tekstem proporcjonalnie do rozmiaru czcionki zdefiniowanego dla pola daty. W tym przykładzie rozmiar czcionki jest zdefiniowany *jako 10pt i będzie powiększany 2,5 razy do tego rozmiaru czcionki. Dlatego podczas zmiany rozmiaru czcionek w przeglądarce pole będzie miało 2,5-krotność rozmiaru tego rozmiaru czcionki.

Najwyżej głosowana odpowiedź tutaj od thomasruttera ma rację w jego odpowiedzi na ich temat . Ale bardzo źle myli się co do wielkości piksela. Więc nawet jeśli jest stary, nie mogę pozwolić, aby nie był zadłużony.

Ekran komputera zwykle NIE ma rozdzielczości 96 dpi! (Lub ppi, jeśli chcesz być pedantyczny.)

Piksel NIE ma ustalonego rozmiaru fizycznego.
(Tak, jest naprawiony tylko na jednym ekranie, ale na następnym ekranie piksel jest najprawdopodobniej większy lub mniejszy, a na pewno NIE 1/96 cala.)


Dowód
Narysuj linię o długości 960 pikseli. Zmierz to za pomocą linijki fizycznej. Czy to 10 cali? Nie..?
Podłącz laptopa do telewizora. Czy linia ma teraz 10 cali? Nadal nie?
Pokaż linię na swoim iPhonie. Nadal ten sam rozmiar? Dlaczego nie?

Kto do cholery wynalazł mit ekranu komputerowego o rozdzielczości 96 dpi?
(Niektóre religie działają zgodnie z mitem 72dpi. Ale równie złe.)

Jest przydatny do wszystkiego, co musi być skalowane zgodnie z rozmiarem czcionki.

Jest to szczególnie przydatne w przeglądarkach, które implementują powiększenie poprzez skalowanie rozmiaru czcionki. Jeśli więc zmierzysz wszystkie elementy za pomocą em, skalują się odpowiednio.

Ponieważ em ( http://en.wikipedia.org/wiki/Em_(typography) ) jest wprost proporcjonalny do aktualnie używanego rozmiaru czcionki. Jeśli rozmiar czcionki to, powiedzmy, 16 punktów, jeden em to 16 punktów. Jeśli rozmiar czcionki wynosi 16 pikseli ( uwaga : nie taki sam jak w punktach), jeden em ma 16 pikseli.

Prowadzi to do dwóch (powiązanych) rzeczy:

1. łatwo zachować proporcje, jeśli później zdecydujesz się edytować rozmiary czcionek w CSS.
2. Wiele przeglądarek obsługuje niestandardowe rozmiary czcionek, zastępując CSS. Jeśli wszystko projektujesz w pikselach, układ może się popsuć w takich przypadkach. Ale jeśli używasz ems, te zastąpienia powinny złagodzić te problemy.

przykład:

Code: body {font-size: 10px;} // trzymaj 10 wszystkich rozmiarów poniżej poprawnych, zmień tę wartość, a reszta zmieni się na np. 1,4 tej wartości

1 {rozmiar czcionki: 1,2 em;} // 12px

2 {rozmiar czcionki: 1,4em;} // 14px

3 {rozmiar czcionki: 1.6em;} // 16px

4 {rozmiar czcionki: 1.8em;} // 18px

5 {rozmiar czcionki: 2em;} // 20px

…

ciało

1

2)

3)

4

5

zmieniając wartość w ciele, reszta zmienia się automatycznie, tak aby była rodzajem wartości bazowej…

10 × 2 = 20 10 × 1,6 = 16 itd

możesz mieć wartość podstawową jako 8px… więc 8 × 2 = 16 8 × 1.6 = 12,8 // może zostać zaokrąglone przez przeglądarkę

Bardzo praktycznym powodem jest to, że IE 6 nie pozwala na zmianę rozmiaru czcionki, jeśli jest określona za pomocą px, podczas gdy robi to, jeśli używasz względnej jednostki, takiej jak em lub wartości procentowe. Niedopuszczenie do zmiany rozmiaru czcionki przez użytkownika jest bardzo niekorzystne dla dostępności. Chociaż spada, wciąż jest wielu użytkowników IE 6.

użyj px do precyzyjnego umieszczenia elementów graficznych. używaj em do pomiarów związanych z pozycjonowaniem i odstępami wokół elementów tekstowych, takich jak wysokość linii itp. px jest dokładny w pikselach, em może zmieniać się dynamicznie z używaną czcionką

Głównym powodem używania em lub wartości procentowych jest umożliwienie użytkownikowi zmiany rozmiaru tekstu bez przerywania projektu. Jeśli projektujesz z czcionkami określonymi w px, nie zmieniają one rozmiaru (w IE 6 i innych), jeśli użytkownik wybierze rozmiar tekstu - większy . Jest to bardzo złe dla użytkowników z upośledzeniami wizualnymi.

Aby zapoznać się z kilkoma przykładami i artykułami na temat takich projektów (jest mnóstwo do wyboru), zobacz najnowszy numer A List Apart: Fluid Grids , starszy artykuł Jak dopasować rozmiar tekstu w CSS lub Bulletproof Web Design Dana Cederholma .

Twoje obrazy powinny nadal być wyświetlane w rozmiarach px, ale ogólnie rzecz biorąc, nie jest uważane za dobrą formę do wymiarowania tekstu za pomocą px.

Choć osobiście gardzę IE6, jest to obecnie jedyna przeglądarka zatwierdzona dla większości użytkowników w naszej firmie Fortune 200.

Istnieje proste rozwiązanie, jeśli chcesz użyć px do określenia rozmiaru czcionki, ale nadal chcesz użyteczności, jaką zapewniają, umieszczając to w pliku CSS:

body {
  font-size: 62.5%;
}

Teraz określ ptagi (i inne) takie jak to:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

I tak dalej.

Prawdopodobnie będziesz chciał używać ich do rozmiarów czcionek, dopóki IE6 nie zniknie (z Twojej strony). Px będzie w porządku, gdy powiększanie strony (w przeciwieństwie do powiększania tekstu) stanie się standardowym zachowaniem.

Traingamer podał już niezbędne linki .

Piksel jest jednostką absolutną, natomiast rem / em są jednostkami względnymi. Więcej informacji: https://drafts.csswg.org/css-values-3/

Powinieneś użyć jednostki względnej, jeśli chcesz, aby rozmiar czcionki był dostosowywany do rozmiaru czcionki w systemie, ponieważ system zapewnia wartość rozmiaru czcionki dla elementu głównego, którym jest element HTML.

W takim przypadku, gdy strona internetowa jest otwarta w Google Chrome, rozmiar czcionki dla elementu HTML jest ustawiany przez chrome, spróbuj go zmienić, aby zobaczyć efekt na stronach internetowych z czcionkami jednostek rem / em.

Jeśli użyjesz pxjako jednostki czcionek, czcionki nie będą się zmieniać, podczas gdy czcionki z rem/em unit zmieniają rozmiar po zmianie rozmiaru czcionki w systemie.

Użyj więc, pxgdy chcesz, aby rozmiar był stały i użyj rem/, emjeśli chcesz, aby rozmiar był adaptacyjny / dynamiczny do rozmiaru systemu.

Ogólna zgoda polega na wykorzystaniu wartości procentowych do zmiany rozmiaru czcionek, ponieważ jest bardziej spójna w różnych przeglądarkach / platformach.

To zabawne, zawsze używałem pt do zmiany rozmiaru czcionek i zakładałem, że wszystkie strony tego używają. Zwykle nie używasz pikseli w innych aplikacjach (np. Word). Myślę, że to dlatego, że są do drukowania - ale rozmiar jest taki sam w przeglądarce internetowej jak w programie Word ...

Zamiast tego używaj remu em lub px, ponieważ łatwiej jest znaleźć obliczoną wartość. Ale pomiędzy em a px, px jest lepszy, ponieważ trudno jest je debugować.