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?
766
Odpowiedzi:
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.
źródło
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.
źródło
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:
Prosta implementacja definiowałaby szerokość
date-box
klasy w px: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:
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.źródło
Ctrl+
iCtrl-
w dowolnej nowoczesnej przeglądarce również skaluje wartości pikseli. Tak jest już od jakiegoś czasu.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.)
źródło
px
ma rozmiar w stosunku do piksela odniesienia , a nie pikseli na ekranach, na których jesteś tutaj. Może ci się to nie podobać, ale wyciągnięcie linijki nie zmniejszy faktu, ani nie przyczyni się do udzielenia odpowiedzi na pytanie. stackoverflow.com/questions/27382331/…"The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees."
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.źródło
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:
źródło
2px
jest0.125em
dla czcionką 16 pikseli.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ę
źródło
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.
źródło
Page > Text Size
). Jednak IE7 dodał zoom strony (Page > Zoom
), który oczywiście powiększa całą stronę, łącznie z tekstem.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ą
źródło
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.
źródło
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:
Teraz określ
p
tagi (i inne) takie jak to:I tak dalej.
źródło
font-size: 10px
. css-tricks.com/forums/discussion/1230/…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 .
źródło
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
px
jako jednostki czcionek, czcionki nie będą się zmieniać, podczas gdy czcionki zrem
/em
unit zmieniają rozmiar po zmianie rozmiaru czcionki w systemie.Użyj więc,
px
gdy chcesz, aby rozmiar był stały i użyjrem
/,em
jeśli chcesz, aby rozmiar był adaptacyjny / dynamiczny do rozmiaru systemu.źródło
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 ...
źródło
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ć.
źródło