Zaprojektuj wrażliwą witrynę o wymiarowaniu opartym na EM

Jan 27, 2026

Jak

Prawdopodobnie słyszałeś, że należy użyć względnych jednostek do rozmiaru czcionki. Jest to dobra reguła dla dostępnego projektowania stron internetowych; Jeśli użytkownik zmienia domyślny rozmiar czcionki przeglądarki, umożliwia zmianę tekstu tekstu do zmiany rozmiaru. Być może zrobiłeś tę radę i wykonałeś przełącznik. Być może wydostałeś kalkulator i przekonwertował rozmiary czcionek witryny px. jednostki do EMS lub, bardziej prawdopodobne, REMS.

Ale jeśli tak się zatrzymałeś, brakuje ci wielu elastyczności i mocy, że EMS wprowadza do przeglądarki. Jednostka EM nie jest po prostu wymiana dla znajomych px. ; Możesz go użyć do większej liczby właściwości niż tylko rozmiar czcionki . Jeśli to zrobisz, niektóre z jego innych korzyści zaczynają się pojawiać.

Konsekwentnie używając EMS, możesz zaprojektować komponenty na stronie, która automatycznie reaguje, jeśli zmienia rozmiar czcionki. Następnie, z sprytną sztuczką dla responsywnego rozmiaru czcionki, możesz produkować całą stronę, która dostosowuje dynamicznie oparte na szerokości rzutni przeglądarki. Pozwól mi pokazać, jak wykorzystywać "względne" zachowanie EMS, aby stworzyć projekty, które są skalowalne i elastyczne.

Jednostki wielkości czcionek

Korzystanie z EMS do rozmiaru czcionki może być trudne. Dokładna wartość jest określona przez dziedziczny rozmiar czcionki elementu (tj. Rozmiar czcionki elementu macierzystego). Jest to skomplikowane, gdy zaczynasz gniazdować elementy głęboko. Jeśli element ma rozmiar czcionki w EMS, jego rodzic ma rozmiar czcionki w EMS, a jego rodzic nie ma jeszcze innego. Będziesz musiał pomnożyć wszystkie te wartości w celu określenia rzeczywistej obliczonej wartości elementu dziecka.

Oznacza to, że umieszczenie tego samego modułu w różnych pojemnikach może zmienić znaczenie EM. Moduł będzie nieprzewidywalny.

Aby tego uniknąć, zazwyczaj używamy innej jednostki względnej do rozmiaru czcionki: REMS. A REM (lub "Root Em") jest oparty na odziedziczonej wielkości czcionki, ale na rozmiarze czcionki elementu korzeniowego strony, & lt; html & gt; . Oznacza to, że jego wartość jest taka sama na całej stronie. Jest bardziej przewidywalny niż, a często preferowany regularne EMS.

Budowanie modułu EMS

Użyjmy względnych jednostek, aby zbudować moduł. Jednak nie będziemy przestrzegali wspólnego podejścia. Zamiast używać REM na wszystko, użyjemy go tylko raz: na najwyższym elemencie modułu. Spowoduje to ustanowienie znanego rozmiaru czcionki dla modułu, a nie na podstawie nieprzewidywalnego łańcucha wartości em nad nim w Domu. Oznacza to, że możemy łatwo skalować rozmiar modułu, nadając jedną wartość.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Użyj REMS na zewnętrznym elemencie, aby ustalić znany rozmiar czcionki, a następnie użyj EMS do budowy na podstawie tej wartości

Po ustaleniu tego znanego rozmiaru czcionki, jesteśmy bezpiecznie korzystać z regularnych EMS przez cały moduł. Użyj go nie tylko dla dowolnych rozmiarów czcionek na podetrzy, ale także dla większości innych właściwości, w tym wyściółka , margines i Radius .

Budujemy panel z nagłówkiem i ciałem. Markup wygląda tak:

 & LT; Div Class = "Panel" & GT;
  & lt; div Class = "Panele-Heading" & GT;
    & lt; H3 & GT oto moc EMS '/ H3 & GT;
  & lt; / div & gt;
  & lt; div class = "panel-korpus" & gt;
    Rozważmy sposoby, w jakie możesz wykorzystać krewny
    jednostki do dynamicznego rozmiaru modułów.
  & lt; / div & gt;
& lt; / div & gt;

Stylmy zbiornika zewnętrznego. Ustawimy rozmiar czcionki 1Rem. ustalić naszą lokalną wartość Następnie zdefiniujemy Radius Korzystanie z EMS. Zazwyczaj lubię używać PX na granicę, aby uzyskać ładną linię.

 .panel {
  rozmiar czcionki: 1Rem;
  Granica: 1px Solid # 678;
  Promień graniczny: 0.3em;
  Przepełnienie: Ukryte;
}

Następnie styl wewnętrznych elementów. Użyjemy EMS do wyściółki. Następnie zwiększymy rozmiar czcionki w pozycji 1,25 razy większa wartość lokalna, wytwarzając rozmiar komputera 20px.

 .panel-heading {
  Wypełnienie: 0.6em 1.2em;
  kolor-kolor: #Cde;
  Border-dno: 1px Solid # 678;
}
.panel-heading & gt; h3 {
  Rozmiar czcionki: 1,25 r
  Marża: 0;
  Odstęp listu: 0,03em;
}
.panel-body {
  Wypełnienie: 0.6em 1.2em;
}

Możesz pomnożyć wartości wyściółki według rozmiaru czcionki, aby określić ich obliczone wartości (9.6px pionowy i 19.2px poziomy). Jednak nie ma znaczenia. Spróbuj nie zostać ugrzęzny z pikselowymi pomiarami. Może to czuć się niezręczne, ale naciśnij. Im więcej używasz EMS, tym więcej znajdziesz z nimi jako jednostkę we własnym zakresie.

Dynamicznie skalowanie projektu

Kiedy tworzymy w ten sposób moduły wielokrotnego użytku, często uważamy, że potrzebujemy kilku odmian. Powiedzmy, że chcieliśmy stworzyć większą wersję. Gdybyśmy używa px na wszystko, oznaczałoby to zwiększenie rozmiaru czcionki, wyściółki, promień graniczny i tak dalej. Jednakże, ponieważ zdefiniowaliśmy wszystko w stosunku do jednego wielkości czcionki opartej na REM, musimy tylko zmienić tę wartość, a cały moduł odpowie:

 .Panel - duża {rozmiar czcionki: 1.2Rem; }

Po prostu dodamy tę klasę do panelu, aby uczynić go większe: & lt; div Class = "Panel panelu - Duży" & GT; . Zmieni to lokalną definicję EM, a zatem promień graniczny i zmiana wyściółki, wraz z wielkością czcionki elementów dziecka. W przypadku pojedynczej deklaracji zmieniliśmy rozmiar każdej części modułu.

A panel module, with paddings and border radius defined using ems — Moduł panelu, z podkładkami i promieniami granicznymi zdefiniowanymi za pomocą EMS

Podobnie możemy stworzyć małą wersję:

 .Panel - mały {rozmiar czcionki: 0,8rem; }

Uziemieniu modułu za pomocą wielkości czcionki najwyższego poziomu w REMS, zrobiliśmy to stabilne i przewidywalne. Określając wszystko inne w stosowaniu EMS, wykonaliśmy wszystkie jego części składowe skalowalne.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Możliwe jest oparcie wielkości wszystkiego wewnątrz modułu na jednej wartości, a następnie zmień tę wartość, aby skalować wszystko

Jest to potężny wzór. Możesz użyć tego podejścia do wszystkiego na swojej stronie, z menu rozwijanego do przycisków mediów społecznościowych. Zmieść moduł o wartości REM, a następnie użyj EM do praktycznie wszystkiego innego z podkładek do pozycjonowania do rozmiarów ikon.

Sprawia, że reaguje

Pchajmy zasadę jeszcze jeden poziom. Rozwiązyliśmy moduł (i teoretycznie wszystkie inne moduły na stronie) przy użyciu REMS i EMS. To ostatecznie oznacza, że ich rozmiar jest oparty na rozmiarze czcionki elementu korzeniowego. Następnie możemy dostosować tę pojedynczą wartość, aby Cała strona odpowiedziała z kolei.

Przynieśmy inną jednostkę względną: vh. . Obliczona wartość tego urządzenia pochodzi z rozmiaru ekranu użytkownika; Jest równy 1 procent szerokości rzutni. Jeśli korzystamy z jednostki VH, aby zdefiniować rozmiar czcionki root, automatycznie skaluje respondentnie, sans zapytań multimedialnych. Ustaw rozmiar czcionki na korzeniu 2vw. :

 HTML {
  Rozmiar czcionki: 2vw;
}

Niestety, efekt jest nieco zbyt silny. Na przykład na iPhone 6, na przykład oblicza się 5,5 px, co jest zbyt małe. Podobnie jest nierozsądnie duże na większych ekranach. Aby zmiękczyć efekt, możemy skorzystać z CSS Calc () funkcjonować:

 HTML {
  Rozmiar czcionki: Calc (0,6EM + 1VW);
}

Teraz rozmiar czcionki pochodzi częściowo od stabilnej wartości, a częściowo od reagowania. Daje to znacznie lepszy efekt. The. 0,6EM. zachowuje się jako rodzaj minimalnego rozmiaru czcionki. Teraz Root Em skala płynnie z około 13px na smartfonie do 21px na przeciętnym ekranie pulpitu.

Z Twoją stroną składa się z skalowalnych modułów, z których każda uziemiona do wartości REM, a oni również będą skalować z rzutnią. Strona jest ustrużona z trójstopniową hierarchią; Możesz zmienić rozmiar całej strony, indywidualnego modułu lub jednego elementu, wykonując prostą edycję do rozmiaru czcionki. Zaufaj EMS i REMS, a przeglądarka zajmie się pracą dla Ciebie.

Nadal możesz dodać sporadyczne zapytanie multimedialne do owijania linii kontrolnej, a kilka innych reagujących dotyczy. Ale ten mały kawałek kodu w połączeniu z nawykiem wykorzystania EMS i REMS otrzyma ci dużo drogi.

Ten artykuł był pierwotnie w magazyn netto. wydać 288; Kupuj tutaj

Powiązane artykuły:

10 sztuczek typograficznych każdy projektant powinien wiedzieć
Przewodnik projektanta do typografii i czcionek
Master Accessible Web Typografia

Zaprojektuj wrażliwą witrynę o wymiarowaniu opartym na EM

Jednostki wielkości czcionek

Budowanie modułu EMS

Dynamicznie skalowanie projektu

Sprawia, że reaguje

Jak - Najpopularniejsze artykuły

Jak wyciągnąć Asukę z Neon Genesis Evangelion

Malowanie portretowe z olejem

Zacznij od platformy animacji Greensock

Zrozumienie właściwości wyświetlania CSS

Jak malować atmosferyczny portret w Photoshopie

Jak zacząć od Sass

Jak zaprojektować przyjazne dla użytkownika interfejsy mobilne

Jak uzyskać więcej z GIFS

Kategorie

Zaprojektuj wrażliwą witrynę o wymiarowaniu opartym na EM

Jednostki wielkości czcionek

Budowanie modułu EMS

Dynamicznie skalowanie projektu

Sprawia, że ​​reaguje

Jak - Najpopularniejsze artykuły

Kategorie

Sprawia, że reaguje