Ems do konwersji pikseli - dlaczego 62,5%, a nie 6,25%?

Question

Wiem, że wielu z nas zna ustawienie rozmiaru czcionki na elemencie body w naszym CSS do 62,5%. Oznacza to, że 1em będzie równe 10 pikseli i będzie pomagać w utrzymaniu pikseli w doskonałej jakości, ale pozwoli także na skalowanie czcionek.

Czy to nie oznacza, że ​​ustawienie na 6,25% będzie równoznaczne z 1em = 1px? Wygląda na to, że konwersja jest jeszcze łatwiejsza niż konieczność pomieszania po przecinku ...

---

Dzięki chłopaki! Jestem dość świadom em i jego historii (stopień projektu), ale jestem pewien, że inni mogą to uznać za pomocne :)

Jeśli chodzi o 1em = 1px, nie widzę, jak to jest niepożądane. Em jest kwadratowy, niezależnie od twoich jednostek (czy to punktów czy pikseli) i nikt nie ustawiłby ich typu na 1px (tak jak nikt nie ustawiłby drukowanego typu na 1pt). Co więcej, nawet twój artykuł przyznaje, że w przypadku większości cyfrowych czcionek, kapitał "M" jest zwykle mniejszy niż 1em, i że em jest jedynie odbiciem rozmiaru punktu (typ 48pt renderowałby 48 punktów na 48 punktów na klawiaturze dla em, 12 punktów typ dałby 12x12, itd.).

Poza tym powodem, dla którego ludzie by to zrobili, byłoby raczej ustawienie wymiarów innych elementów na stronie, aby wszystko ładnie się skalowało, gdy użytkownik dostosuje rozmiar czcionki. Oczywiście, zawsze znajdzie się niewielu, którzy ustawią domyślną wartość na 16px, ale warto zapłacić za perfekcyjny układ, który ładnie się skaluje.

Answer 1

Prawdopodobnie, ale stracisz kontrolę nad swoją skalą. Nie zapominaj, że nagłówki zazwyczaj będą dziedziczyć te same rozmiary proporcjonalnie do ich rangi (to jest <h1> będzie największe, <h2> nieco mniejsze). Jeśli chcesz zmniejszyć te elementy, będziesz musiał użyć wartości em z wieloma dziesiętnymi symbolami zastępczymi. Wyobraź sobie <h4> font-size: 0.005em.

Albo gorzej, jeśli chcesz, aby czcionki były skalowane większe, możesz potencjalnie patrzeć na font-size: 40em lub coś niedorzecznego.

W skrócie, 1em = 10px jest znacznie bardziej praktyczne dla skalowanych wartości czcionek. Choć skala 1: 1 może mieć sens na papierze, nie nadaje się tak dobrze do rozsądnych i możliwych do utrzymania CSS.

Answer 2

Konwersja może być prostsza, ale em nie oznacza tego, co ma na myśli.

1em ma być równy szerokości, jeśli jest napisane wielką literą "M" w danej czcionce. Jeśli szerokość litery M wynosi 1 piksel, twoja czcionka będzie nieczytelna.

http://en.wikipedia.org/wiki/Em_(typography)

Answer 3

Przede wszystkim, nie należy zakładać, że będzie 1 em równa 10 pikseli. Jednostka em jest bezpośrednio skorelowana z używaną typografią. Jeśli ktoś ma rozmiar czcionki 16 pikseli, wtedy 62,5% jest rzeczywiście 10 pikseli (16 * 0,625 = 10), ale oczywiście to się zmieni, gdy ktoś zmieni domyślny rozmiar czcionki.

Po drugie, pierwszy raz słyszałem o użyciu 62,5% dla podstawowego ciała font-size. Zawsze używam font-size z 76% jako opartej na Sane CSS Typography by Owen Briggs.

Na koniec, aby odpowiedzieć na pytanie, można użyć czcionki o rozmiarze 6,25%, a następnie na przykład 12em zamiast 1.2em. Jednak zdecydowanie zniechęciłbym tę metodologię. W świecie typograhy jeden em ma być the width of the capital letter 'M'.Ta metoda całkowicie narusza tę powszechną praktykę i poważnie myli każdego, kto może utrzymać Twój CSS w przyszłości.

Answer 4

Cała rzecz "62,5% = 10px" jest zasadniczo zepsuta - 62,5% może być lub nie być 10 pikseli w zależności od przeglądarki, ustawień użytkownika, a zwłaszcza minimalnego rozmiaru czcionki. Więc nie możesz po prostu projektować w pikselach, a następnie "konwertować" do ems przy założeniu, że 62,5% = 10 pikseli, ponieważ twój projekt będzie się cały czas łamał. Jeśli chcesz uzyskać pikselowy design, musisz użyć pikseli jako jednostki. Jeśli potrzebujesz elastycznego projektu, musisz pomyśleć o odpowiednich jednostkach dla różnych elementów strony internetowej - ems dla elementów, które powinny skalować się odpowiednio do rozmiaru tekstu, procentów dla elementów, które powinny być skalowane w stosunku do rozmiaru okna i pikseli dla elementów (jak obrazy), które w ogóle nie powinny się skalować.

Każdy, kto zawiera rozmiar czcionki: 62,5% w ich CSS zasadniczo nie rozumie, jak zaprojektować dla sieci.

Answer 5

Może się to okazać również przydatne. http://pixel2em.kleptomac.com Zapewnia to konwerter pikselów online na em, a także pełną konwersję plików CSS.

Answer 6

Zaktualizowana wersja jest dostępna pod adresem http://pixelconverter.kleptomac.com Jest to internetowy konwerter jednostek do przeliczania pikseli, punktów, em, wartości procentowych. Obsługuje konwersję z/do dowolnej z tych jednostek.

Answer 7

Świetne pytanie.

widzę 6,25% jako ciekawą propozycją dla adaptacyjnego/responsive web design i elastyczna szablony.

W szczególności rozmiar czcionki z jednostką rem nadaje się do twojej argumentacji ... stosunek 1: 1 jest po prostu łatwiejszy.

rem: "root em" ... rozmiar czcionki elementu głównego. http://www.w3.org/TR/css3-values/

Zobacz ten rem przykład z: http://snook.ca/archives/html_and_css/font-size-with-rem#c67739

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */ 
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */ 

a teraz sugestię ...

html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */ 
body { font-size: 14px; font-size: 14rem; } /* =14px */ 
h1 { font-size: 24px; font-size: 24rem; } /* =24px */ 

... Zagraj z moim przykładzie JSBin: Testing CSS3 "rem" Units for Elastic Content

Stosunek 1: 1 em do px powinien prowadzić do l ess literówki.

Uwagi REM: z właściwego resetuje CSS i body deklarujące bazę font-size w obu px i rem swoimi stylami pogorszyć wdziękiem ... Jeśli rem jest obsługiwany, i oświadczył po px, to jest wartość nie jest stosowana. W przeciwnym razie przeglądarka wraca do wersji px.

Ustalanie wsparcia (zwłaszcza na urządzenia mobilne) dla rem. Proszę nacisnąć tę stronę na dowolnej/wszystkich przeglądarkach/urządzeniach, ...http://ahedg.es/w/rem.html

Answer 8

starałem się zrobić to samo, ale wpadł kwestii korzystania REMS do marż i uszczelek. Ustawienie wartości na font-size na 62,5% pozwala uniknąć tych problemów.

Na przykład, następujący CSS

html { 
    font-size: 6.25% /* 16px * .0625 => 1px */ 
} 

p { 
    font-size: 1rem; 
    margin: 1rem; 
} 

renderuje jak:

p { 
    font-size: 1px; 
    margin: 9px; /* WTF?! */ 
} 

Dziwne, prawda? Zakładam, że jest to spowodowane dziwnym konfliktem z minimalnymi rozmiarami czcionek.

---

Teraz, jeśli używasz font-size: 62.5% z drugiej strony, rzeczy czynią zgodnie z oczekiwaniami:

html { 
    font-size: 62.5% /* 16px * .625 => 10px */ 
} 

p { 
    font-size: .1rem; 
    margin: .1rem; 
} 

renderuje jak:

p { 
    font-size: 1px; 
    margin: 1px; 
}