Jaka jest różnica między pti pxw CSS? Którego powinienem użyć i dlaczego?

px ≠ Piksele

Wszystkie te odpowiedzi wydają się być błędne. Wbrew intuicji w CSS px nie ma pikseli . Przynajmniej nie w prostym fizycznym sensie.

Przeczytaj ten artykuł z W3C , EM, PX, PT, CM, IN… , o tym, jak pxpowstaje „magiczna” jednostka dla CSS. Znaczenie pxzależy od sprzętu i rozdzielczości. (Ten artykuł jest świeży, ostatnia aktualizacja 2014-10).

Mój własny sposób myślenia o tym: 1 px is the size of a thin line intended by a designer to be barely visible.

Cytując ten artykuł :

Jednostka px jest magiczną jednostką CSS. Nie jest ona związana z aktualną czcionką ani z jednostkami bezwzględnymi. Jednostka px jest zdefiniowana jako mała, ale widoczna i taka, że ​​pozioma linia o szerokości 1 piksela może być wyświetlana z ostrymi krawędziami (bez wygładzania). Co jest ostre, małe i widoczne, zależy od urządzenia i sposobu, w jaki jest używane: czy trzymasz je blisko oczu, jak telefon komórkowy, na wyciągnięcie ręki, jak monitor komputera, czy gdzieś pomiędzy, jak książka? W związku z tym px nie jest definiowany jako stała długość, ale jako coś, co zależy od typu urządzenia i jego typowego zastosowania.

Aby zorientować się w wyglądzie piksela, wyobraź sobie monitor CRT z lat 90. XX wieku: najmniejsza kropka, jaką może wyświetlić, ma około 1/100 cala (0,25 mm) lub trochę więcej. Jednostka px ma swoją nazwę od tych pikseli ekranu.

Obecnie istnieją urządzenia, które w zasadzie mogą wyświetlać mniejsze, ostre punkty (chociaż do ich zobaczenia może być potrzebna lupa). Ale dokumenty z ubiegłego wieku, które używały px w CSS, nadal wyglądają tak samo, niezależnie od urządzenia. Szczególnie drukarki mogą wyświetlać ostre linie ze znacznie mniejszymi szczegółami niż 1 piksel, ale nawet na drukarkach linia 1 piksela wygląda bardzo podobnie, jak wyglądałaby na monitorze komputera. Urządzenia się zmieniają, ale px zawsze ma ten sam wygląd.

Ten artykuł zawiera wskazówki dotyczące używania ptvs pxvs em, aby odpowiedzieć na to pytanie.

Tutaj masz bardzo szczegółowe wyjaśnienie ich różnic

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

The jist of it (from source)

Piksele to jednostki o stałym rozmiarze, które są używane w mediach wyświetlanych na ekranie (tj. Do odczytu na ekranie komputera). Piksel oznacza „element obrazu” i jak wiesz, jeden piksel to jeden mały „kwadrat” na ekranie. Punkty są tradycyjnie używane w mediach drukowanych (wszystko, co ma być wydrukowane na papierze itp.). Jeden punkt to 1/72 cala. Punkty są podobne do pikseli, ponieważ są jednostkami o stałym rozmiarze i nie można ich skalować.

Spójrz na ten doskonały artykuł w CSS-Tricks:

• px - em -% - pt - słowo kluczowe

Zaczerpnięte z artykułu:

pt

Ostatnią jednostką miary, w której można zadeklarować rozmiary czcionek, są wartości punktowe (pt). Wartości punktowe dotyczą tylko wydruku CSS! Punkt to jednostka miary używana w rzeczywistej typografii drukowanej na papierze. 72 pkt = jeden cal. Jeden cal = jeden prawdziwy cal jak na linijce. Ani cala na ekranie, który jest całkowicie arbitralny w oparciu o rozdzielczość.

Podobnie jak piksele są śmiertelnie dokładne na monitorach pod względem rozmiaru czcionki, rozmiary punktów są martwe na papierze. Aby uzyskać najlepsze wyniki w różnych przeglądarkach i na różnych platformach podczas drukowania stron, skonfiguruj arkusz stylów drukowania i dostosuj rozmiar wszystkich czcionek do rozmiarów punktowych.

Na dobrą sprawę, powodem, dla którego nie używamy rozmiarów punktów do wyświetlania ekranu (poza absurdem), jest to, że wyniki w różnych przeglądarkach są drastycznie różne:

px

Jeśli potrzebujesz precyzyjnej kontroli, rozmiar czcionek w wartościach pikseli (px) to doskonały wybór (to mój ulubiony). Na ekranie komputera nie jest dokładniejszy niż pojedynczy piksel. Zmieniając rozmiar czcionek w pikselach, dosłownie mówisz przeglądarkom, aby renderowały litery o dokładnie takiej liczbie pikseli wysokości:

Windows, Mac, aliasy, wygładzanie, różne przeglądarki, nie ma znaczenia, czcionka ustawiona na 14 pikseli będzie miała wysokość 14 pikseli. Ale to nie znaczy, że nadal nie będzie pewnych zmian. W poniższym krótkim teście wyniki były nieco bardziej spójne niż w przypadku słów kluczowych, ale nie identyczne:

Ze względu na charakter wartości pikseli nie tworzą one kaskady. Jeśli element nadrzędny ma rozmiar 18 pikseli, a element podrzędny 16 pikseli, element podrzędny będzie miał 16 pikseli. Jednak ustawienia rozmiaru czcionki mogą być używane łącznie. Na przykład, jeśli rodzic został ustawiony na 16 pikseli, a dziecko na większe, dziecko rzeczywiście wyjdzie większe niż rodzic. Szybki test pokazał mi to:

„Większy” podbił 16 pikseli elementu nadrzędnego do 20 pikseli, co oznacza 25% wzrost.

W przeszłości piksele miały zły wpływ na dostępność i użyteczność. W IE 6 i starszych rozmiarach czcionek ustawionych w pikselach użytkownik nie może zmieniać rozmiaru . Oznacza to, że my, młodzi, zdrowi projektanci, możemy ustawić czcionkę na 12 pikseli i dobrze odczytać ją na ekranie, ale kiedy ludzie trochę dłużej w zębie podbijają rozmiar, aby mogli go przeczytać, nie są w stanie tego zrobić. To naprawdę wina IE 6, a nie nasza, ale mamy to, co mamy i musimy sobie z tym poradzić.

Ustawienie rozmiaru czcionki w pikselach jest najdokładniejszą (i moim zdaniem najbardziej satysfakcjonującą) metodą, ale weź pod uwagę liczbę odwiedzających, którzy nadal używają IE 6 w Twojej witrynie i ich potrzeby w zakresie dostępności. Jesteśmy na krawędzi, że nie musimy już się tym przejmować.

Punkt to 1/72 cala i jest bezużyteczną miarą wszystkiego, co jest renderowane na urządzeniu, które nie oblicza poprawnie DPI. To sprawia, że ​​jest to rozsądny wybór do drukowania i straszny wybór do użytku na ekranie.

Piksel to piksel, który w większości przypadków będzie mapowany na piksel ekranu.

CSS zapewnia kilka innych jednostek, a to, którą powinieneś wybrać, zależy od tego, jaki ustawiasz rozmiar.

Piksel jest świetny, jeśli chcesz dopasować coś do obrazu lub chcesz uzyskać cienką ramkę.

Procenty są świetne w przypadku rozmiarów czcionek, ponieważ jeśli używasz ich konsekwentnie, otrzymasz rozmiary czcionek proporcjonalne do preferencji użytkownika.

Ems są świetne, gdy chcesz, aby element sam się rozmiarował na podstawie rozmiaru czcionki (więc akapit może być szerszy, jeśli rozmiar czcionki jest większy)

… i tak dalej.

pt jest wyprowadzeniem (skrótem) „punktu”, które w przeszłości było używane w drukowanych twarzach, gdzie rozmiar był zwykle „mierzony” w „punktach”, gdzie 1 punkt ma przybliżony wymiar 1/72 cala, a zatem 72 czcionka punktowa miałaby rozmiar 1 cala.

px to skrót od „piksela”, który jest prostą „kropką” na ekranie, drukarce igłowej lub innej drukarce lub urządzeniu, które renderuje w sposób punktowy - w przeciwieństwie do starych maszyn do pisania, które miały stały rozmiar, ciągły wybijak, pozostawił odcisk postaci naciskając na wstążce, pozostawiając w ten sposób obraz o ustalonym rozmiarze.

Ściśle związane z punktem są terminy „wielkie litery” i „małe litery”, które w przeszłości miały związek z wyborem ustalonych znaków typograficznych, w których znaki „wielkie litery” były umieszczane w ramce (wielkość liter) nad znakami bez wielkich liter, które zostały umieszczone w polu poniżej, a więc „małe” litery.

Były różne pola (przypadki) dla różnych czcionek typograficznych i rozmiarów, ale nadal i „duże” i „małe” litery dla każdego z nich.

Innym terminem jest „pica”, która jest miarą jednego znaku w czcionce, zatem pica to 1/6 cala lub 12-punktowych jednostek miary (12/72).

Mówiąc krótko, pomiar jest na komputerach 4,233 mm lub 0,166 cala, podczas gdy stary punkt (amerykański) to 1 / 72,27 cala, a francuski to 4,512 mm (0,177 cala). Stąd moje stwierdzenie „przybliżone” odnośnie pomiarów.

Ponadto maszyny do pisania używane w biurach miały rozmiar „Elite” lub „Pica”, gdzie rozmiar wynosił odpowiednio 10 i 12 znaków na cal.

Ponadto „punkt”, przed standaryzacją, był oparty na rozmiarze „stopy” typografów metalowych, wielkości podstawowego śladu jednego znaku i nieco się różnił.

Należy zauważyć, że typograficzna „stopa” pochodziła pierwotnie z rzeczywistej stopy zmarłego drukarza. Stopka typograficzna zawiera 72 piki lub 864 punkty.

Jeśli chodzi o użycie CSS, wolę używać EM zamiast px lub pt, zyskując w ten sposób przewagę skalowania bez utraty względnej lokalizacji i rozmiaru.

EDYCJA: Dla kompletności możesz pomyśleć o EM (em) jako elemencie miary jednej wysokości czcionki, więc 1em dla czcionki 12-punktowej byłby wysokością tej czcionki, a 2em byłby dwukrotnie wyższy. Zauważ, że dla czcionki 12px 2em to 24 piksele. SO 10px to zazwyczaj 0,63em standardowej czcionki, ponieważ „większość” przeglądarek bazuje na 16px = 1em jako standardowym rozmiarze czcionki.