Dlaczego em zamiast px?
Słyszałem, że powinieneś definiować rozmiary i odległości w arkuszu stylów za pomocą em zamiast w pikselach. Więc pytanie brzmi, dlaczego powinienem używać em zamiast px przy definiowaniu stylów w css? Czy jest jakiś dobry przykład, który to ilustruje?
14 answers
Błędem jest stwierdzenie, że jeden jest lepszym Wyborem niż drugi(albo oba nie dałyby własnego celu w spec). Warto nawet zauważyć, że StackOverflow szeroko wykorzystuje jednostki px. To nie jest zły wybór Spoike powiedział, że był.
Definicja jednostek
-
Px jest absolutną jednostką miary (podobnie jak W, pt , lub cm ), która również jest 1/96 W jednostce (więcej dlaczego później). Ponieważ jest to pomiar bezwzględny, może być użyty w dowolnym momencie, gdy chcesz zdefiniować coś jako konkretny rozmiar, a nie być proporcjonalny do czegoś innego, takiego jak rozmiar okna przeglądarki lub rozmiar czcionki.
Podobnie jak wszystkie inne jednostki absolutne, px jednostki nie skalują się zgodnie z szerokością okna przeglądarki. Tak więc, jeśli cały projekt strony używa jednostek bezwzględnych, takich jak px, a nie %, nie dostosuje się do szerokości przeglądarka. Nie jest to z natury dobre lub złe, tylko wybór, który projektant musi dokonać między przestrzeganiem dokładnego rozmiaru a nieelastycznością w porównaniu z rozciąganiem, ale w procesie nie przylegającym do dokładnego rozmiaru. Byłoby to typowe dla witryny, aby mieć mieszankę obiektów o stałym rozmiarze i elastycznych rozmiarach.
Elementy o stałym rozmiarze często muszą być włączone do strony - takie jak banery reklamowe, logo lub ikony. Zapewnia to, że prawie zawsze potrzebujesz co najmniej niektórych pomiary oparte na px w projekcie. Na przykład obrazy będą (domyślnie) skalowane tak, aby każdy piksel miał rozmiar 1 * px*, więc jeśli projektujesz obraz, będziesz potrzebować jednostek px. Jest to również bardzo przydatne do precyzyjnego doboru rozmiaru czcionki i szerokości obramowania, gdzie ze względu na zaokrąglenie najbardziej sensowne jest użycie jednostek px dla większości ekranów.
Wszystkie pomiary bezwzględne są ze sobą ściśle powiązane, to znaczy 1in jest zawsze 96px, tak jak 1in jest zawsze 72pt. (Zauważ, że 1in prawie nigdy nie jest fizycznym Calem, gdy mówimy o mediach ekranowych). Wszystkie pomiary bezwzględne zakładają nominalną rozdzielczość ekranu 96ppi i nominalną odległość oglądania monitora stacjonarnego, a na takim ekranie jeden px będzie równy jednemu fizycznemu pikselowi na ekranie i jeden W będzie równy 96 fizycznym pikselom. On ekrany, które różnią się znacznie gęstością pikseli lub odległością wyświetlania, lub jeśli użytkownik powiększył stronę za pomocą funkcji powiększania przeglądarki, px nie będą już musiały odnosić się do pikseli fizycznych.
-
Em nie jest jednostką absolutną - jest jednostką względną do aktualnie wybranego rozmiaru czcionki. Jeśli nie zmieniono stylu czcionki, ustawiając rozmiar czcionki za pomocą bezwzględnej jednostki (np. px lub pt ), będzie to miało wpływ przez wybór czcionek w przeglądarce użytkownika lub systemie operacyjnym, jeśli zostały one wykonane, więc nie ma sensu używać em jako ogólnej jednostki długości, z wyjątkiem przypadków, w których chcesz, aby skalować jako rozmiar czcionki skaluje.
Użyj em , gdy 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 nadrzędnego. Są dobrą alternatywą dla px jednostki dla rzeczy takich jak Całkowita szerokość projektu, jeśli projekt nie opiera się na określonych rozmiarach pikseli, aby ustawić jego rozmiar.
Za pomocą % jednostki w projekcie pozwalają projektowi dostosować się do szerokości ekranu / urządzenia, podczas gdy użycie jednostki absolutnej, takiej jak px, nie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-11 06:17:02
Mam mały laptop o wysokiej rozdzielczości i muszę uruchomić Firefoksa w 120% tekstowym zoomie, aby móc czytać bez mrużenia oka.
Wiele stron ma z tym problemy. Układ staje się zniekształcony, tekst w przyciskach jest cięty na pół lub znika całkowicie. Parzyste stackoverflow.com :
Zwróć uwagę, jak górne przyciski i Zakładki strony nakładają się na siebie. Gdyby używali jednostek em zamiast px, nie byłoby problemu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-27 09:47:50
Powodem, dla którego zadałem to pytanie, było to, że zapomniałem, jak korzystać z em, ponieważ było to chwilę, gdy hakowałem szczęśliwie w CSS. Ludzie nie zauważyli, że zachowałem ogólne pytanie, ponieważ nie mówiłem o wielkości czcionek per se. Bardziej interesowało mnie, jak definiować Style na dowolnym elemencie bloku na stronie.
JakoHenrik Paul i inni wskazywali, że em jest proporcjonalny do wielkości czcionki użytej w elemencie. Powszechną praktyką jest definiowanie rozmiarów elementów blokowych w px, jednak rozmiar czcionek w przeglądarkach Zwykle łamie ten projekt. Zmiana rozmiaru czcionki jest zwykle wykonywana za pomocą klawiszy skrótu Ctrl++ lub Ctrl+-. Więc dobrą praktyką jest, aby używać em zamiast.
Użycie px do określenia szerokości
Oto przykład ilustracyjny. Powiedzmy, że mamy znacznik div, który chcemy przekształcić w stylowe pole daty, możemy mieć kod HTML, który wygląda tak:
<div class="date-box">
<p class="month">July</p>
<p class="day">4</p>
</div>
Prosta implementacja określałaby szerokość klasy date-box 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
Jednak, jeśli chcemy powiększyć tekst w naszej przeglądarce, projekt się zepsuje. Tekst będzie również spadał poza pole, co jest prawie takie samo, co dzieje się z projektem SO, jak wskazuje flodin . Dzieje się tak dlatego, że pole pozostanie tego samego rozmiaru w szerokości, jak jest zablokowane na 50px.
Używanie em zamiast
Mądrzejszym sposobem jest zdefiniowanie szerokości w ems zamiast:
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 fluid design on the date-box, tzn. pudełko będzie się powiększać wraz z tekstem proporcjonalnie do rozmiaru czcionki zdefiniowanej dla date-box. W tym przykładzie rozmiar czcionki jest zdefiniowany w * jako 10pt i zwiększy się 2,5 razy do tego rozmiaru czcionki. Tak więc podczas doboru czcionek w przeglądarce okno będzie miało 2,5-krotność rozmiaru czcionki.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-11 06:20:22
Top głosował odpowiedź tutaj od thomasrutter ma rację w swojej odpowiedzi na temat em . Ale jest bardzo bardzo źle co do wielkości piksela. Więc nawet jeśli jest stary, nie mogę pozwolić, aby był niezachwiany.
Ekran komputera zwykle nie ma 96dpi! (Lub ppi, jeśli chcesz być pedantyczny.)
Piksel nie ma stałej wielkości fizycznej.
(Tak, jest on ustalony tylko na jednym ekranie, ale na następnym ekranie piksel jest najprawdopodobniej większy lub mniejszy i z pewnością Nie 1/96 cala.)
dowód
Narysuj linię o długości 960 pikseli. Zmierz go za pomocą linijki fizycznej. 10 cali? Nie..?
Podłącz laptopa do telewizora. Czy linia jest teraz 10 cali? Nadal nie?
Pokaż linię na iPhonie. Nadal ten sam rozmiar? Dlaczego nie?
Kto do cholery wymyślił mit o ekranach komputerowych 96dpi?
(Niektóre religie działają z mitem 72dpi. Ale równie źle.)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-01 23:09:13
Jest przydatny do wszystkiego, co musi skalować się zgodnie z rozmiarem czcionki.
Jest to szczególnie przydatne w przeglądarkach, które implementują zoom przez skalowanie rozmiaru czcionki. Więc jeśli rozmiar wszystkich elementów za pomocą em skalują się odpowiednio.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-24 10:59:27
Ponieważ em ( http://en.wikipedia.org/wiki/Em_ (typografia) ) jest wprost proporcjonalna do aktualnie używanej czcionki. Jeśli rozmiar czcionki wynosi, powiedzmy, 16 punktów, jeden em to 16 punktów. Jeśli rozmiar czcionki wynosi 16 pikseli (Uwaga : nie jest taki sam jak punkty), jeden em to 16 pikseli.
Prowadzi to do dwóch (powiązanych) rzeczy:
- łatwo jest zachować proporcje, jeśli później zdecydujesz się edytować rozmiary czcionek w CSS.
- wiele przeglądarek obsługuje niestandardowe rozmiary czcionek, / align = "left" / CSS Jeśli projektujesz wszystko w pikselach, w takich przypadkach układ może ulec uszkodzeniu. Ale jeśli używasz ems, te przesłonięcia powinny złagodzić te problemy.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-04 07:18:05
Przykład:
Kod: body{font-size: 10px;} / / zachowaj przy 10 Wszystkie Rozmiary poniżej poprawne, zmień tę wartość, a reszta zmień na np. 1.4 tej wartości
1 {font-size: 1.2 em;} / / 12px
2{font-size:1.4 em;} / / 14px
3 {font-size: 1.6 em;} / / 16px
4{font-size:1.8 em;} / / 18px
5 {font-size:2EM;} //20px
…
Body
1
2
3
4
5
Zmieniając wartość w ciele reszta zmienia automatycznie być rodzajem wartości bazowej ...
10×2=20 10×1.6=16 etc
Możesz mieć wartość bazową jako 8px ... więc 8×2=16 8×1,6=12,8 / / może być zaokrąglone przez przeglądarkę
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-18 05:51:40
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 procenty. Nie zezwalanie użytkownikowi na zmianę rozmiaru czcionki jest bardzo szkodliwe dla dostępności. Chociaż jest w spadku, nadal istnieje wiele użytkowników IE 6.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-04 07:30:15
Użyj px do precyzyjnego umieszczania elementów graficznych. użyj em do pomiarów mających na celu pozycjonowanie i odstępy wokół elementów tekstowych, takich jak wysokość linii itp. px jest dokładna do pikseli, em może zmieniać się dynamicznie wraz z używaną czcionką
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-04 07:13:50
Głównym powodem używania em lub procentów 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 text size-larger . Jest to bardzo złe dla użytkowników z utrudnieniami wizualnymi.
Aby zapoznać się z kilkoma przykładami i artykułami na temat takich projektów (jest ich mnóstwo do wyboru), Zobacz najnowszy numer listy Apart: Fluid Grids , starszy artykuł Jak powiększyć tekst w CSS lub zaprojektować stronę www .
Twoje obrazy powinny być nadal wyświetlane z rozmiarem px, ale ogólnie rzecz biorąc, rozmiar tekstu z rozmiarem px nie jest uważany za dobrą formę.
Tak samo jak ja osobiście gardzę IE6, jest to obecnie tylko przeglądarka zatwierdzona dla większości użytkowników w naszej firmie Fortune 200.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-04 19:54:07
Istnieje proste rozwiązanie, jeśli chcesz użyć px do określenia rozmiaru czcionki, ale nadal chcesz, aby użyteczność zapewniała em, umieszczając ją w pliku CSS:
body {
font-size: 62.5%;
}
Teraz określ ciebie p (i inne) tagi podobne do:
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-11 04:20:05
Jeśli to coś warte, oto definicja różnych jednostek w CSS: http://www.w3.org/TR/css3-values/#lengths .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-11 14:23:12
Prawdopodobnie chcesz używać em dla 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 już dostarczył niezbędne linki .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:24
Ogólnym konsensusem jest używanie procentów do doboru czcionek, ponieważ jest to bardziej spójne w przeglądarkach/platformach.
To zabawne, zawsze używałem pt do doboru czcionek i założyłem, że wszystkie strony tego używają. Zwykle nie używasz rozmiarów px w innych aplikacjach (np. Word). Chyba dlatego, że są do drukowania - ale rozmiar jest taki sam w przeglądarce internetowej jak w Wordzie...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-03-06 00:40:43