|
Większość projektantów domowych lubi używać px, podczas gdy większość zagranicznych stron korzysta z nich i rem, więc czym się różnią te trzy i jakie są zalety oraz wady każdego z nich? Przedstawimy wam szczegółowe wprowadzenie. Funkcje PX: 1. IE nie może regulować rozmiaru czcionki tych, które używają px jako jednostki; 2. Powodem, dla którego większość zagranicznych stron można dostosować, jest to, że używają ich lub rem jako jednostek czcionek; 3. Firefox może regulować px, em i rem, ale ponad 96% chińskich internautów korzysta z przeglądarki (lub jądra) IE. piksele px. Względne jednostki długości. Pixel px jest względny do rozdzielczości ekranu monitora. (Cytowane z instrukcji CSS2.0) em jest jednostką względną długości. Rozmiar czcionki względem tekstu w aktualnym obiekcie. Jeśli rozmiar czcionki tekstu w wierszu nie jest sztucznie ustawiony, będzie on zależny od domyślnego rozmiaru czcionki przeglądarki. (Cytowane z instrukcji CSS2.0) Domyślna wysokość czcionki dla każdej przeglądarki to 16px. Wszystkie przeglądarki bez korekt spełniają wymagania: 1em=16px. Wtedy 12px=0.75em, 10px=0.625em. Aby uprościć konwersję rozmiaru czcionki, musisz zadeklarować rozmiar czcionki=62,5% w selektorze ciała w CSS, co sprawia, że wartość em jest 16px*62,5%=10px, więc 12px=1,2em, 10px=1em, co oznacza, że wystarczy podzielić oryginalną wartość px przez 10, a następnie zastąpić ją em jako jednostką. Funkcje EM: 1. Wartość em nie jest stała; 2. Em dziedziczy rozmiar czcionki elementu nadrzędnego. Dlatego pisząc CSS, musimy zwracać uwagę na dwie rzeczy: 1. Zadeklaruj rozmiar czcionki=62,5% w selektorze ciała; 2. Podziel swoją oryginalną wartość px przez 10 i zastąp ją jednostką em; 3. Przelicz wartości em tych powiększonych czcionek. Unikaj powtarzających się deklaracji rozmiaru czcionki. To znaczy, aby uniknąć zjawiska 1,2 * 1,2 = 1,44. Na przykład, jeśli zadeklarujesz rozmiar czcionki 1.2em w #content, to przy deklarowaniu rozmiaru czcionki p może to być tylko 1em, a nie 1.2em, ponieważ to em nie jest tym em, a staje się 1em=12px, ponieważ dziedziczy wysokość czcionki #content. Cechy REM REM to nowa jednostka względna (root em) dodana do CSS3, która wzbudziła duże zainteresowanie. Jaka jest różnica między tym urządzeniem a EM? Różnica polega na tym, że gdy używasz rem do ustawienia rozmiaru czcionki dla elementu, to nadal jest to rozmiar względny, ale względny to tylko element główny HTML. Można uznać, że ta jednostka łączy zalety względnego rozmiaru i rozmiaru absolutnego, dzięki czemu może nie tylko modyfikować tylko element główny, by proporcjonalnie dostosowywać wszystkie rozmiary czcionek, ale także unikać reakcji łańcuchowej polegającej na warstwie kumulacji rozmiarów czcionek. Obecnie REM jest wspierany we wszystkich przeglądarkach oprócz IE8 i starszych. Dla przeglądarek, które tego nie obsługują, odpowiedź jest również bardzo prosta – polega na napisaniu instrukcji absolutnej jednostki. Te przeglądarki ignorują zestaw rozmiaru czcionki w REM. Oto przykład: p {font-size:14px; rozmiar czcionki: .875rem; } Nuta:Wybór jednostek czcionek zależy głównie od Twojego projektu, a jeśli twoi użytkownicy korzystają z najnowszej wersji przeglądarki, to zalecany jest REM, jeśli kompatybilność jest problemem, to używaj px lub obu tych rozwiązań. Oto adres narzędzia do konwersji jednostek px, em, rem:http://pxtoem.com/
| 
Opublikowano 21.03.2017 09:31:50
|
|
|
