Czy powinienem używać jednostek wartości px lub rem w moim CSS?

Projektuję nową stronę internetową i chcę, aby była kompatybilna z jak największą ilością przeglądarek i ustawień przeglądarki. Próbuję zdecydować, jakiej jednostki miary powinienem użyć dla rozmiarów moich czcionek i elementów, ale nie jestem w stanie znaleźć rozstrzygającej odpowiedzi.

Moje pytanie brzmi: Czy powinienem używać px LUB rem w moim CSS?

  • na razie Wiem, że używanie px nie jest kompatybilne z użytkownikami, którzy dostosowują podstawowy rozmiar czcionki w swojej przeglądarce.
  • I ' ve [[3]} S, ponieważ są one bardziej kłopotliwe w utrzymaniu, w porównaniu do rem s, gdy są kaskadowe.
  • niektórzy mówią, że rems są niezależne od rozdzielczości i dlatego bardziej pożądane. Ale inni mówią, że większość nowoczesnych przeglądarek i tak powiększa wszystkie elementy jednakowo, więc używanie px nie stanowi problemu.

Pytam o to, ponieważ istnieje wiele różnych opinii, co jest najbardziej pożądaną miarą odległości w CSS, i nie jestem pewien, który jest najlepszy.

Author: zzzzBov, 2012-08-03
Source

11 answers

TL; DR: użyj px.

Fakty

  • Po pierwsze, niezwykle ważne jest, aby wiedzieć, że na spec, Jednostka CSS px Nie równa się jednemu fizycznemu pikselowi wyświetlacza. To było zawsze było prawdą-nawet w 1996 CSS 1 spec.

    CSS definiuje piksel odniesienia , który mierzy rozmiar piksela na wyświetlaczu o rozdzielczości 96 dpi. Na wyświetlaczu, który ma DPI znacznie różniące się od 96dpi (jak Retina displays), agent użytkownika przeskalowuje jednostkę px tak, aby jej rozmiar odpowiadał rozmiarowi piksela referencyjnego. Innymi słowy, to przeskalowanie jest dokładnie tym, dlaczego 1 piksel CSS równa się 2 fizycznym Pikselom wyświetlania siatkówki.

    To powiedziawszy, do 2010 roku (i niezależnie od sytuacji mobilnego zoomu), px prawie zawsze był równy jednemu fizycznemu pikselowi, ponieważ wszystkie powszechnie dostępne wyświetlacze miały około 96dpi.

  • Rozmiary określone w em s są względne do rodzica element . Prowadzi to do "problemu łączenia" em, w którym zagnieżdżone elementy stają się stopniowo większe lub mniejsze. Na przykład: 

    body { font-size:20px; } 
div { font-size:0.5em; }

    Daje nam: 

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

  • CSS3 rem, który jest zawsze relatywny tylko do elementu root html, jest zbyt Nowy, aby na nim polegać. W lipcu 2012 około 75% wszystkich przeglądarek w użyciu obsługuje rem.

Opinia

Myślę, że wszyscy się zgadzają, że dobrze jest zaprojektować swoje strony tak, aby były przystosowanie do wszystkich, oraz uwzględnienie osób niedowidzących. Jednym z takich rozważań (ale nie jedynym!) pozwala użytkownikom na powiększenie tekstu witryny, dzięki czemu jest łatwiejszy do odczytania.

Na początku jedynym sposobem, aby zapewnić użytkownikom możliwość skalowania rozmiaru tekstu, było użycie jednostek rozmiaru względnego (takich jak ems). Dzieje się tak dlatego, że menu rozmiaru czcionki przeglądarki po prostu zmieniło rozmiar czcionki głównej. Tak więc, jeśli określisz rozmiary czcionek w px, nie będą one skalowane podczas zmiany opcji rozmiaru czcionki w przeglądarce.

Nowoczesne przeglądarki (a nawet niezbyt nowoczesny IE7) zmieniły domyślną metodę skalowania, aby po prostu powiększać wszystko, w tym obrazy i rozmiary pudełek. Zasadniczo sprawiają, że piksel odniesienia jest większy lub mniejszy.

Tak, ktoś mógłby jeszcze zmienić domyślny arkusz stylów przeglądarki, aby dostosować domyślny rozmiar czcionki( odpowiednik opcji rozmiaru czcionki w starym stylu), ale to bardzo ezoteryczny sposób na to i chciałbym zakład nikt1 robi to. (W Chrome jest ukryty pod ustawieniami zaawansowanymi, zawartością internetową, rozmiarami czcionek. W IE9 jest jeszcze bardziej ukryty. Musisz nacisnąć Alt i przejść do widoku, rozmiar tekstu.) Znacznie łatwiej jest po prostu wybrać opcję powiększenia w menu głównym przeglądarki (lub użyć Ctrl++/-/kółka myszy).

1 - w błąd statystyczny, naturalnie

Jeśli Zakładamy, że większość użytkowników skaluje strony za pomocą opcji zoom, uważam, że względne jednostki w większości nieistotne. O wiele łatwiej jest rozwinąć stronę, gdy wszystko jest określone w tej samej jednostce (wszystkie obrazy są rozpatrywane w pikselach) i nie musisz się martwić o składanie. ("powiedziano mi, że nie będzie matematyki" - jest do czynienia z koniecznością obliczania, do czego faktycznie działa 1,5 em.)

Innym potencjalnym problemem związanym z używaniem tylko względnych jednostek dla rozmiarów czcionek jest to, że czcionki zmieniane przez użytkownika mogą łamać założenia układu. Przykładowo, to może to prowadzić do obcięcia tekstu lub zbyt długiego działania. Jeśli używasz jednostek absolutnych, nie musisz się martwić o nieoczekiwane rozmiary czcionek powodujące złamanie układu.

Więc moja odpowiedź to użyj jednostek pikseli. Używam px do wszystkiego. Oczywiście twoja sytuacja może się różnić i jeśli musisz wspierać IE6 (niech bogowie RFC zlitują się nad tobą), i tak będziesz musiał użyć ems.

 374
Author: josh3736,
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
2012-08-03 21:04:18

chciałbym pochwalić odpowiedź josh3736 za dostarczenie jakiegoś doskonałego kontekstu historycznego. Chociaż jest dobrze artykułowany, krajobraz CSS zmienił się w ciągu prawie pięciu lat od zadania tego pytania. Kiedy zadano to pytanie, px była poprawna odpowiedź, ale to już nie jest prawdą.

Tl; dr: rem

Przegląd Jednostek

Historycznie px jednostki typowo reprezentował jeden piksel urządzenia. W przypadku urządzeń o coraz większej gęstości pikseli nie jest to już dostępne dla wielu urządzeń, takich jak wyświetlacz Retina firmy Apple.

rem jednostki reprezentują Rozmiar r oot em . To font-size cokolwiek pasuje :root. W przypadku HTML jest to element <html>; dla SVG jest to element <svg>. Domyślnym font-size w każdej przeglądarce* jest 16px.

W momencie pisania, rem jest obsługiwany przez ok. 98% użytkowników . Jeśli martwisz się o pozostałe 2%, przypomnę, że zapytania o media są również obsługiwane przez około 98% użytkowników.

On Using px

Większość przykładów CSS w Internecie używa wartości px, ponieważ były one de facto standardem. pt, in i wiele innych jednostek mogło być używane w teorii, ale nie radziły sobie dobrze z małymi wartościami, ponieważ szybko trzeba było uciekać się do ułamki, które były dłuższe do pisania i trudniejsze do rozumowania.

Jeśli chcesz cienką granicę, z px możesz użyć 1px, Z {[28] }musisz użyć 0.75pt dla spójnych wyników, a to nie jest zbyt wygodne.

On Using rem

rem'domyślna wartość 16px nie jest zbyt mocnym argumentem przemawiającym za jej użyciem. Pisanie 0.0625remjest gorsze niż pisanie0.75pt, więc dlaczego ktoś miałby używać rem?

Istnieją dwie części do rem's przewagi nad innymi jednostkami.

  • preferencje użytkownika są przestrzegane
  • możesz zmienić pozorną px wartość rem na jaką chcesz

Respektowanie Preferencji Użytkownika

Powiększenie przeglądarki bardzo się zmieniło na przestrzeni lat. Historycznie wiele przeglądarek skalowałoby się tylko w górę font-size, ale zmieniło się to dość szybko, gdy witryny zdały sobie sprawę, że ich piękne Pikselowe projekty łamały się za każdym razem, gdy ktoś powiększył lub pomniejszył. Na w tym punkcie przeglądarki skalują całą stronę, więc powiększanie oparte na czcionkach jest poza obrazem.

Respektowanie życzeń użytkownika nie jest wykluczone. To, że przeglądarka jest domyślnie ustawiona na 16px, nie oznacza, że żaden użytkownik nie może zmienić swoich preferencji na 24px lub 32px, aby skorygować złe widzenie. Jeśli ustawisz swoje jednostki poza rem, każdy użytkownik o większym rozmiarze czcionki zobaczy proporcjonalnie większą witrynę. Granice będą większe, padding będą większe, marginesy będą większe, wszystko będzie płynnie skalowane.

Jeśli bazujesz swoje zapytania o media na rem, Możesz również upewnić się, że strona, którą widzą Twoi użytkownicy, pasuje do ich ekranu. Użytkownik z font-size ustawionym na 32px w szerokiej przeglądarce 640px, będzie widzieć Twoją stronę w sposób pokazany użytkownikowi w 16px w szerokiej przeglądarce 320px. Nie ma absolutnie żadnej straty dla RWD w używaniu rem.

Zmiana Pozorna px Wartość

Ponieważ rem opiera się na font-size węzła :root, jeśli chcesz zmień to co reprezentuje 1rem, wszystko co musisz zrobić to zmienić font-size: 

:root {
  font-size: 100px;
}
body {
  font-size: 1rem;
}
<p>Don't ever actually do this, please</p>

cokolwiek robisz, nie ustawiaj :root elementu font-size na wartość px.

Jeśli ustawisz font-size on html na wartość px, stracisz preferencje Użytkownika bez możliwości ich odzyskania.

Jeśli chcesz zmienić pozorną wartość rem, użyj jednostek %.

Matematyka dla tego jest dość prosta.

Pozorna wielkość czcionki :root to 16px, ale powiedzmy, że chcemy zmienić ją na 20px. Wszystko, co musimy zrobić, to pomnożyć 16 przez jakąś wartość, aby uzyskać 20.

Ustaw swoje równanie: 

16 * X = 20

I rozwiąż dla X: 

X = 20 / 16
X = 1.25
X = 125%


:root {
  font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>

Robienie wszystkiego w wielokrotnościach 20 nie jest takie wspaniałe, ale powszechną sugestią jest, aby pozorna wielkość rem była równa {77]}. Magia numer dla tego to 10/16 czyli 0.625, lub 62.5%.

:root {
  font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>

Problem polega na tym, że domyślne font-size dla reszty strony jest ustawione zbyt małe, ale jest na to prosta poprawka: Ustaw font-size na body używając rem: 

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
<p>I'm the default font-size</p>

Ważne jest, aby pamiętać, że po wprowadzeniu tej korekty pozorna wartość rem wynosi 10px, co oznacza, że każda wartość, w której napisałeś px może zostać przekonwertowana bezpośrednio do rem przez podanie miejsca po przecinku.

padding: 20px;

Zamienia się w 

padding: 2rem;

Rozmiar czcionki, którą wybierzesz, zależy od ciebie, więc jeśli chcesz, nie ma powodu, dla którego nie możesz użyć: 

:root {
  font-size: 6.25%;
}
body {
  font-size: 16rem;
}

I mają 1rem równe 1px.

Więc masz to, proste rozwiązanie, aby uszanować życzenia użytkowników, jednocześnie unikając nadmiernego komplikowania twojego CSS.

Gdzie jest haczyk?

Bałam się, że o to zapytasz. Tyle ile bym chciał udawaj, że rem jest magia i rozwiązuje-wszystko-rzeczy, nadal są pewne kwestie na uwadze. Moim zdaniem nic nie łamie umowy , ale zadzwonię do nich, żebyś nie mógł powiedzieć, że cię nie ostrzegałem.

Zapytania O Media

Jeden z pierwszych problemów, z którymi napotkasz rem dotyczy zapytań o media. Rozważmy następujący kod: 

:root {
  font-size: 1000px;
}
@media (min-width: 1rem) {
  :root {
    font-size: 1px;
  }
}

Tutaj wartość rem zmienia się w zależności od tego, czy Zapytanie o media ma zastosowanie, a Zapytanie o media zależy od wartości z rem, więc co się dzieje?

rem w media queries używa wartości początkowej font-size i nie bierze pod uwagę żadnych zmian, które mogły mieć miejsce w font-size elementu :root. Innymi słowy, jego pozorna wartość to zawsze 16px.

Jest to nieco irytujące, ponieważ oznacza to, że musisz wykonać niektóre obliczenia ułamkowe, ale odkryłem, że większość popularnych zapytań o media używa już wartości, które są wielokrotnościami 16.

|   px | rem |
+------+-----+
|  320 |  20 |
|  480 |  30 |
|  768 |  48 |
| 1024 |  64 |
| 1200 |  75 |
| 1600 | 100 |

Dodatkowo, jeśli używasz preprocesora CSS, możesz użyć mixinów lub zmiennych do zarządzania zapytaniami o media, które całkowicie zamaskują problem.

Przełączanie Kontekstu

Jeśli przełączasz się między różnymi projektami, jest całkiem możliwe, że pozorna wielkość czcionki rem będzie miała różne wartości. W jednym projekcie możesz używać pozornego rozmiaru 10px, gdzie w innym projekcie pozorny rozmiar może być 1px. To może być mylące i powodować problemy.

Moim jedynym zaleceniem jest trzymanie się 62.5%, aby przekształcić rem do pozornej wielkości 10px, ponieważ było to bardziej powszechne w moim doświadczeniu.

Współdzielone biblioteki CSS

Jeśli piszesz CSS, który będzie używany w witrynie, nad którą nie kontrolujesz, na przykład w przypadku wbudowanego widżetu, naprawdę nie ma dobrego sposobu, aby wiedzieć, jaki pozorny rozmiar rem będzie miał. Jeśli tak jest, nie krępuj się używać px.

Jeśli nadal chcesz używać rem, rozważ zwolnienie Sass lub mniej wersji arkusza stylów ze zmienną w celu nadpisania skalowania dla pozornego rozmiaru rem.

* nie chcę nikogo odstraszać od używania rem, ale nie byłem w stanie oficjalnie potwierdzić, że każda przeglądarka używa 16px domyślnie. Widzisz, Jest wiele przeglądarek i nie byłoby tak trudno, aby jedna przeglądarka się tak rozeszła nieco do, powiedzmy 15px lub 18px. W testach nie widziałem jednak żadnego przykładu, w którym przeglądarka używająca ustawień domyślnych w systemie używającym ustawień domyślnych miała jakąkolwiek wartość inną niż 16px. Jeśli znajdziesz taki przykład, podziel się nim ze mną.

 105
Author: zzzzBov,
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:34:43

Ten artykuł opisuje całkiem dobrze plusy i minusypx, em, i rem.

Autor ostatecznie dochodzi do wniosku, że najlepszą metodą jest prawdopodobnie użycie zarówno px, jak i rem, deklarowanie px Najpierw dla starszych przeglądarek i ponowne deklarowanie rem dla nowszych przeglądarek: 

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
 40
Author: uzyn,
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
2012-08-03 16:40:55

Jako odruchową odpowiedź polecam użycie rem, ponieważ pozwala na zmianę "poziomu powiększenia" całego dokumentu naraz, jeśli to konieczne. W niektórych przypadkach, gdy rozmiar ma być względny do elementu nadrzędnego, użyj em.

ale obsługa rem jest spotty, IE8 potrzebuje polyfill, a Webkit wykazuje błąd. Co więcej, obliczanie subpikseli może spowodować, że rzeczy takie jak linie jednego piksela czasami znikną. Remedium jest kodowanie w pikselach dla tak bardzo małych żywioły. To wprowadza jeszcze większą złożoność.

Więc, ogólnie, zadaj sobie pytanie, czy warto - jak ważne i prawdopodobne jest, że zmienisz "poziom powiększenia" całego dokumentu w CSS?

W niektórych przypadkach tak, w niektórych przypadkach nie.

Więc to zależy od twoich potrzeb i musisz ważyć plusy i minusy, ponieważ korzystanie z rem i em wprowadza kilka dodatkowych rozważań w porównaniu do "normalnego" przepływu pracy opartego na pikselach.

Należy pamiętać, że łatwo jest przełączyć (a raczej przekonwertować) swój CSS z px na rem (JavaScript to inna historia), ponieważ następujące dwa bloki kodu CSS dałyby ten sam wynik: 

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}

html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}
 7
Author: Rolf,
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-01-29 16:39:04

Josh3736 odpowiedź jest dobra, ale aby podać kontrapunkt 3 lata później:

Zalecam używanie jednostek rem dla czcionek, choćby dlatego, że ułatwia to Tobie, deweloperowi, zmianę rozmiarów. To prawda, że użytkownicy bardzo rzadko zmieniają domyślny rozmiar czcionki w swoich przeglądarkach, a nowoczesny zoom przeglądarki skaluje się w górę jednostek px. Ale co, jeśli twój szef przyjdzie do Ciebie i powie "nie powiększaj obrazów lub ikon, ale Powiększ wszystkie czcionki". O wiele łatwiej jest po prostu Zmień rozmiar czcionki głównej i pozwól, aby wszystkie inne czcionki skalowały się względem tego, a następnie zmień rozmiar px w dziesiątkach lub setkach reguł css.

Myślę, że nadal sensowne jest używanie jednostek px dla niektórych obrazów lub dla niektórych elementów układu, które powinny być zawsze tej samej wielkości niezależnie od skali projektu.

Caniuse.com być może powiedział, że tylko 75% przeglądarek, gdy josh3736 opublikował swoją odpowiedź w 2012, ale według stanu na 27 marca twierdzą, że 93.78% popiera . Tylko IE8 nie obsługuje go wśród przeglądarek, które śledzą.

 2
Author: Joshua Carmody,
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-04-03 17:03:08

Znalazłem najlepszy sposób na zaprogramowanie rozmiaru czcionki na stronie internetowej to zdefiniowanie podstawowego rozmiaru czcionki dla body, a następnie użycie em (lub rem) dla każdego innego font-size deklaruję po tym. Przypuszczam, że to osobiste preferencje, ale dobrze mi służyło, a także ułatwiło włączenie bardziej responsywnego projektu .

Jeśli chodzi o korzystanie z jednostek rem, myślę, że dobrze jest znaleźć równowagę między progresywnością w kodzie, ale także oferować wsparcie dla starszych przeglądarek. Sprawdź ten link o obsłudze przeglądarki dla jednostek rem, który powinien pomóc w dobrej decyzji.

 1
Author: cereallarceny,
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
2012-08-03 16:03:28

pt jest podobna do rem, ponieważ jest stosunkowo stała, ale prawie zawsze niezależna od DPI, nawet jeśli niezgodne przeglądarki traktują px w sposób zależny od urządzenia. rem różni się w zależności od rozmiaru czcionki elementu głównego, ale możesz użyć czegoś takiego jak Sass/Compass, aby zrobić to automatycznie za pomocą pt.

Gdybyś miał to: 

html {
    font-size: 12pt;
}

Wtedy 1rem Zawsze będzie 12pt. rem i em są tak samo niezależne od urządzenia, jak elementy, na których się opierają; niektóre przeglądarki nie zachowuj się zgodnie ze specyfikacją i traktuj px dosłownie. Nawet w dawnych czasach Sieci, 1 punkt był konsekwentnie uważany za 1/72 cala-to znaczy, są 72 punkty w calu.

Jeśli masz starą, niezgodną z wymaganiami przeglądarkę i masz: 

html {
    font-size: 16px;
}

Wtedy 1rem będzie zależna od urządzenia. Dla elementów, które dziedziczyłyby z html domyślnie, 1em będzie również zależny od urządzenia. 12pt byłby miejmy nadzieję gwarantowanym niezależnym od urządzenia odpowiednikiem: 16px / 96px * 72pt = 12pt, gdzie 96px = 72pt = 1in.

Matematyka może być dość skomplikowana, jeśli chcesz trzymać się określonych jednostek. Na przykład, .75em of html = .75rem = 9pt i .66em of .75em of html = .5rem = 6pt. Dobra zasada:
  • Użyj pt dla wielkości bezwzględnych. Jeśli naprawdę potrzebujesz, aby to było dynamiczne w stosunku do elementu głównego, wymagasz zbyt wiele CSS; potrzebujesz języka, który kompiluje się do CSS, jak Sass / SCSS.
  • Użyj em dla względnych rozmiarów. to całkiem przydatne móc powiedzieć: "Chcę margines po lewej stronie, aby być o maksymalnej szerokości litery, "lub," sprawiają, że tekst tego elementu jest tylko trochę większy niż jego otoczenie."<h1> jest dobrym elementem, na którym należy użyć rozmiaru czcionki w ems, ponieważ może ona pojawić się w różnych miejscach, ale zawsze powinna być większa niż w pobliżu tekstu. W ten sposób nie musisz mieć oddzielnego rozmiaru czcionki dla każdej klasy, która została zastosowana do h1: rozmiar czcionki dostosuje się automatycznie.
  • Użyj px dla bardzo małych rozmiarów. w bardzo małym rozmiary, pt mogą być rozmyte w niektórych przeglądarkach przy 96 DPI, ponieważ pt i px nie do końca się zgadzają. Jeśli chcesz tylko utworzyć cienką, jednopikselową ramkę, Powiedz TAK. Jeśli masz wyświetlacz o wysokiej rozdzielczości dpi, nie będzie to dla ciebie oczywiste podczas testowania, więc koniecznie przetestuj w pewnym momencie ogólny wyświetlacz o rozdzielczości 96 DPI.
  • nie zajmuj się subpikselami, aby robić rzeczy fantazyjne na wyświetlaczach o wysokiej rozdzielczości. niektóre przeglądarki mogą go obsługiwać-szczególnie na wyświetlaczach o wysokiej rozdzielczości DPI-ale nie jest to Większość użytkowników woli duże i jasne, choć Internet nauczył nas deweloperów inaczej. Jeśli chcesz dodać rozszerzone szczegóły dla użytkowników z najnowocześniejszymi ekranami, możesz użyć grafiki wektorowej (Czytaj: SVG), co i tak powinieneś robić.
 1
Author: Zenexer,
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-03-31 07:44:33

Połowa (ale tylko połowa) złośliwa odpowiedź (druga połowa to gorzka pogarda dla rzeczywistości biurokracji):

Użyj vh

Wszystko jest zawsze dopasowane do okna przeglądarki.

Zawsze zezwalaj na przewijanie w dół, nigdy na bok.

Ustaw szerokość ciała na statyczną 50vh, a nic nie unosi się ani nie wyłamuje z macierzystego div. I styl tylko za pomocą tabel, więc wszystko jest utrzymywane sztywno na swoim miejscu zgodnie z oczekiwaniami. Dołącz funkcję javascript, aby cofnąć dowolną aktywność ctrl+/ -, którą użytkownik może zrób.

Wszyscy będą cię nienawidzić, z wyjątkiem ludzi, którzy każą ci dopasować rzeczy do ich makiety, i będą zachwyceni. I każdy wie, że liczy się tylko ich opinia.

 -1
Author: liljoshu,
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-09-07 16:42:03

Tak. Albo raczej nie.

To bez znaczenia. Użyj tego, który ma sens dla Twojego konkretnego projektu. PX I EM lub oba równie ważne, ale będą zachowywać się nieco inaczej w zależności od ogólnej architektury CSS strony.

UPDATE:

Dla wyjaśnienia, stwierdzam, że zazwyczaj nie ma znaczenia, którego używasz. Czasami możesz wybrać jeden nad drugim. EMs są ładne, jeśli możesz zacząć od zera i chcesz użyć podstawowego rozmiaru czcionki i niech wszystko będzie względem tego.

Px są często potrzebne, gdy modernizujesz przeprojektowanie na istniejącą bazę kodu i potrzebujesz specyfiki px, aby zapobiec złym problemom z zagnieżdżeniem.

 -3
Author: DA.,
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
2012-08-03 16:30:04

Em są drogą naprzód, nie tylko dla czcionek, ale można ich używać z pudełkami, grubością linii i innymi rzeczami, dlaczego?

Po prostu em są jedynymi, które skalują się w połączeniu z klawiszami alt+ i alt w przeglądarce do powiększania.

Inne Wymiary skali, ale nie tak czyste jak em.

Na marginesie jeśli chcesz jak najlepiej skalować, przekonwertuj również grafikę do formatu SVG opartego na wektorach, gdzie to możliwe, ponieważ będą one również skalowane z powiększeniem przeglądarki / align = "left" /

 -4
Author: shawty,
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
2012-08-03 16:07:15

EMs są jedyną rzeczą, która skaluje dla zapytań o media, które obsługują skalowanie+/ -, co ludzie robią cały czas, nie tylko niewidomi. Oto kolejna bardzo dobrze napisana Profesjonalna demonstracja, dlaczego to ma znaczenie.

Nawiasem mówiąc, dlatego Fundacja Zurb używa ems, podczas gdy gorszy Bootstrap 3 nadal używa pikseli.

 -5
Author: robmuh,
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-03-10 16:41:59