Piksele a punkty w HTML/CSS

Zasady są następujące:

Piksele do wyświetlania ekranu; punkty do drukowania.

'em' lub '%' (i mniej znane rem) są lepsze dla bardziej elastycznego układu.

em jest jednostką miary opartą na wielkości litery "m" w bieżącej czcionce. Określanie rozmiarów w em pozwala na określenie rozmiaru na podstawie rozmiaru czcionki, co oznacza, że możesz zmienić czcionkę, a układ zmieni się tak, jak chcesz.

Ale jest wiele razy, kiedy trzeba użyć stałego rozmiar. W takim przypadku px Zazwyczaj będzie najlepiej, ponieważ większość stron internetowych jest wyświetlana na ekranie opartym na pikselach. Ale jeśli planujesz mieć stronę, która jest dużo drukowana, możesz mieć arkusz stylów z układem punktowym.

Ogólnie polecam em przez px lub pt. Jeśli używasz px, dzieje się tak dlatego, że na stronie znajdują się elementy o rozmiarach pikseli, takie jak obrazy, które muszą być zgodne z resztą układu. W tym przypadku, ponieważ obrazy są w pikselach, podobnie jak arkusze stylów. Ponadto, ponieważ punkty są jednostką miary drukowania, nie ma gwarancji, w jaki sposób pojawią się na ekranie: px jest oparty na ekranie, więc zapewni Ci o wiele bardziej spójny wygląd na ekranie między przeglądarkami i między platformami.

Przy okazji, ta strona może dać ci więcej informacji: http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

Punkty są świetne, ponieważ mają 1/72 cala wysokości. Wiesz, jak wysoki będzie twój tekst. Problem z pikselami polega na tym, że stają się mniejsze im wyższa rozdzielczość. piksele są świetne, jeśli chcesz owinąć tekst wokół obrazu tła. Wymaga trochę pracy, ale może to zrobić ładną stronę. Słyszałem, że piksele nie można zmieniać rozmiaru w IE - więc jeśli chcą zwiększyć rozmiar czcionki nie mogą. nie używaj IE, więc nie mogę powiedzieć. Pamiętaj o tym. EM zostawia cię na w jaki sposób dana osoba ma zdefiniowane rozmiary czcionek w swojej przeglądarce. Ems i procenty ułatwiają. Zawsze używam punktów.

[...]

Nie, punkty nie są najlepsze . Kto znajdzie ten wątek, niech zapomni, że go czytałeś. To jest forum projektowania stron internetowych. Do wyświetlania stron na nośnikach ekranowych. punkty są zawarte w CSS wyłącznie do celów projektowania druku. Dla arkuszy stylów mediów drukowanych. nie są skalowalne jako%, a ems to . Jeśli jesteś jakikolwiek projektant stron internetowych powinien pracować nad tym, aby Twoje strony były dostępne, a korzystanie z punktów jest uderzeniem w to od samego początku.

Http://www.v7n.com/forums/coding-forum/17594-font-size-pixel-vs-point.html

To zabawne, każdy odpowiada "pixel lub %/em", a nie "pixel lub punkty".

Więcej informacji

Edit: Jeszcze więcej informacji... oficjalne!

Nie określa rozmiar czcionki w pt lub inne jednostki długości bezwzględnej arkuszy stylów ekranu. Są one renderowane niezgodnie na różnych platformach i nie mogą być zmieniane przez agenta użytkownika(np. zachowaj użycie takich jednostek do stylizacji na nośnikach o stałych i znanych właściwościach fizycznych (np. druk).

Każdy kto każe ci używać pikseli jest zły . Piksele działają dobrze, ale po prostu nie są wymagane... Nigdy! Punkty są doskonałym sposobem na określenie miary bezwzględnej, a dla skali, nad którą zwykle pracujemy w Internecie, są one częściej niż nie preferowaną miarą.

Oprócz Punktów, jest też pica, cal, centymetr i tak dalej. Wybór jednego z nich nad drugim jest bardzo podobny do powiedzenia: "powinienem zmierzyć ten pokój w stopach lub calach?"Niech zdrowy rozsądek będzie Twój przewodnik. Wszyscy wykonają swoją pracę.

Em, który pojawił się w niektórych odpowiedziach, powinien być zarezerwowany na kiedy jest to właściwe. To znaczy: "kiedy to coś się skaluje, chcę, żeby to drugie się skalowało". Po to są środki względne. Wiem, że to przekracza zakres twojego pierwotnego pytania, ale musiałem odnieść się do niektórych bzdur o "Zawsze używaj em".

BTW, piksele nie są równe pikselom fizycznym. Dziś px w arkuszu stylów oznacza 1/96 cala. To dlatego Nie używaj ich. Większość ludzi o tym nie wie. Używają ich, myśląc, że określają rzeczywiste piksele. Nie mogę brać tych ludzi na poważnie z tym, że jest to oczywiste (chociaż nie winię ludzi, winię mylącą naturę stanu rzeczy, dlatego kampanie na piksele znikają.). Co więcej, jeśli piksele naprawdę oznaczają piksele, byłby to okropny sposób na określenie wymiarów. Mówić o tym, że rzeczy losowo kurczą się i rosną w oparciu o niekontrolowane arbitralne rozdzielczości ekranu. Rany! Trzymaj się z dala od pikseli!!! W praktyce działają, ale tylko ze względu na fudging niewidoczne wysiłki ze strony twórców przeglądarek i ludzi OS, w teorii są strasznie niejednoznaczny sposób określenia swoich intencji.

Odpowiedź Johna B powyżej jest najlepsza i najdokładniejsza. Chciałem tylko zwrócić uwagę na możliwe zamieszanie wywołane przez odpowiedź powyżej jego. "Em" w typografii to szerokość litery " m " w wybranej czcionce. Aby określić wysokość czcionki, drukarki / maszyny do pisania używały "x height", która jest wysokością małych liter x dla czcionki.

Jak wskazuje John, pt to stała jednostka miary równa 1/72 cala. Ponieważ monitory mają różną gęstość pikseli (72 / cal, 96 / cal...) generalnie nie jest to dobry sposób na rozmiar rzeczy w dokumentach HTML.

Em odnosi się bezpośrednio do starej jednostki typograficznej i stanowi doskonałą miarę względną. Gdy rozmiar ekranu jest skalowany, rozmiary czcionek skalują się wraz z nim. Jeśli używasz znaczników em dla marginesów, skalują się one w stosunku do rozmiarów czcionek, co jest generalnie dobrą rzeczą.

Ale dla marginesów, wypełnień i wszystkich rzeczy nie związanych bezpośrednio z czcionką, najlepiej jest użyć rem 's, lub "relative ems". Najlepszym sposobem na to jest zadeklarowanie początkowo domyślny rozmiar czcionki dla tagu body lub html. Coś takiego jak body font-size = 16px to dobre miejsce na początek. Następnie wszędzie indziej w dokumencie użyj em dla tekstu, a rem dla wszystkiego innego. Lub użyj procentów. Jedno i drugie będzie dobre. Podobnie jak em i rem, twój% jest względem oryginalnego rozmiaru czcionki 16px = 100%.

Wszystko w dokumencie będzie skalowane w stosunku do początkowego ustawienia dla 100% rozmiaru czcionki przy 16px. W ten sposób można użyć pomiaru piksela tylko raz w dokument. Jest to przydatne, jeśli później chcesz ustawić zapytania multimedialne, aby dostosować rozmiary i marginesy, aby dostosować je do różnych gęstości pikseli na różnych wyświetlaczach urządzeń. Musisz mieć tylko zapytania dla tej jednej wstępnej deklaracji w tagu body. Wszystko inne dostosuje się do tego i nie będzie trzeba go zmieniać.

Just a thought, maxw3st

Myślę, że to zależy od tego, co próbujesz zrobić.

Kluczowe pytanie brzmi: czy odległość musi zmieniać rozmiar okna? Niektóre jednostki są względne, niektóre (jak piksele i punkty) nie są-Krótki opis jest tutaj .

Nie widziałem często używanych punktów, px wydaje się bardziej powszechne, gdy potrzebny jest pomiar bezwzględny.

Piksele są dla mnie bardziej estetyczne i uważam, że są uważane za lepszą praktykę...

Odpowiedź brzmi: to zależy. Do czego wykorzystujesz swoje marże? Czy są one integralną częścią zrównoważonego, zmienialnego układu, czy po prostu zapewniają rynnę wokół krawędzi? Procenty działają lepiej w pierwszym przypadku, a piksele działają dobrze w drugim.

Powinieneś wypróbować różne możliwości i określić, która najlepiej sprawdza się w Twoim dokumencie. Ponieważ w tym przypadku nie ma "dobra i zła", możesz wybrać odpowiedź, która będzie dla Ciebie najlepsza.

Używam pikseli do prawie wszystkiego.

Dla mnie to "czuje" jakbym miał bardziej precyzyjną kontrolę.

Dla kilku rzeczy, które muszę dynamicznie zmieniać rozmiar okna, używam procent.

EDIT:

Co to jest "em"?