merancang situs responsif dengan ukuran berbasis EM

Sep 13, 2025

Bagaimana caranya

Anda mungkin pernah mendengar bahwa Anda harus menggunakan unit relatif untuk ukuran font. Ini adalah aturan yang baik untuk desain web yang dapat diakses; Jika pengguna mengubah ukuran font default browser mereka, ini memungkinkan teks halaman Anda untuk mengubah ukurannya. Anda mungkin telah mengambil saran ini dan membuat sakelar. Mungkin Anda keluar dari kalkulator Anda dan mengonversi ukuran font situs Anda dari absolut px. unit ke EMS atau, lebih mungkin, REMS.

Tetapi jika di situlah Anda berhenti, Anda kehilangan banyak fleksibilitas dan kekuatan yang dilakukan EMS ke browser. Unit EM bukan hanya pengganti untuk yang akrab px. ; Anda dapat menggunakannya untuk lebih banyak properti daripada adil ukuran huruf . Jika ya, beberapa manfaatnya mulai muncul.

Dengan secara konsisten menggunakan EMS, Anda dapat merancang komponen pada halaman yang merespons secara otomatis jika ukuran font berubah. Kemudian, dengan trik pintar untuk ukuran font responsif, Anda dapat menghasilkan seluruh halaman yang menyesuaikan secara dinamis berdasarkan lebar viewport browser. Biarkan saya menunjukkan kepada Anda bagaimana memanfaatkan perilaku 'relatif' EMS untuk membuat desain yang dapat diskalakan dan responsif.

Unit ukuran font

Menggunakan EMS untuk ukuran font bisa rumit. Nilai yang tepat ditentukan oleh ukuran font yang diwariskan elemen (I.E. Ukuran font dari elemen induk). Ini menjadi rumit ketika Anda mulai elemen bersarang lebih dalam. Jika suatu elemen memiliki ukuran font di EMS, induknya memiliki ukuran font di EMS, dan induknya memiliki yang lain. Anda harus mengalikan semua nilai-nilai ini untuk menentukan nilai komputasi aktual dari elemen anak.

Ini berarti menempatkan modul yang sama dalam wadah yang berbeda mungkin mengubah arti EM. Modul akan tidak dapat diprediksi.

Untuk menghindari ini, kami biasanya menggunakan unit relatif yang berbeda untuk ukuran font: REMS. Rem (atau 'root em') didasarkan pada ukuran font yang diwariskan, tetapi pada ukuran font elemen root halaman, & lt; html & gt; . Ini berarti nilainya sama di seluruh halaman. Ini lebih dapat diprediksi daripada, dan seringkali lebih disukai, EMS reguler.

Membangun Modul dengan EMS

Mari kita gunakan unit relatif untuk membangun modul. Namun, kita tidak akan mengikuti pendekatan umum. Alih-alih menggunakan REM untuk semuanya, kami akan menggunakannya hanya sekali: pada elemen paling atas dari modul. Ini akan menetapkan ukuran font yang diketahui untuk modul, daripada didasarkan pada rantai nilai EM yang tidak dapat diprediksi di atasnya di DOM. Ini berarti kita dapat dengan mudah mengukur ukuran modul dengan mengesampingkan nilai tunggal.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Gunakan REMS pada elemen terluar untuk menetapkan ukuran font yang diketahui, kemudian gunakan EMS untuk membangun berdasarkan nilai itu

Setelah kami menetapkan ukuran font yang diketahui ini, kami aman untuk menggunakan EMS reguler di seluruh modul. Gunakan itu tidak hanya untuk ukuran font pada sub-elemen, tetapi juga untuk sebagian besar properti lainnya, termasuk lapisan , batas dan BORDER-RADIUS. .

Kami akan membangun panel dengan judul dan tubuh. Markup terlihat seperti ini:

 & lt; div class = "panel" & gt;
  & lt; div class = "heading panel" & gt;
    & lt; h3 & gt; lihatlah kekuatan EMS & lt; / h3 & gt;
  & lt; / div & gt;
  & lt; div class = "panel-body" & gt;
    Pertimbangkan cara-cara yang dapat Anda leverage relatif
    Unit untuk ukuran dinamis modul Anda.
  & lt; / div & gt;
& lt; / div & gt;

Mari kita gaya wadah luar. Kami akan menetapkan ukuran font di 1rem untuk menetapkan nilai EM lokal kami. Kita kemudian akan mendefinisikan BORDER-RADIUS. menggunakan EMS. Saya biasanya suka menggunakan px untuk perbatasan, untuk mendapatkan garis bagus yang bagus.

 .Panel {
  Ukuran font: 1REM;
  Perbatasan: 1px solid # 678;
  BORDER-RADIUS: 0.3EM;
  Overflow: Tersembunyi;
}

Selanjutnya, gaya elemen dalam. Kami akan menggunakan EMS untuk bantalan. Kemudian kami akan menambah ukuran font menuju 1,25 kali nilai EM lokal kami, menghasilkan ukuran yang dihitung 20px.

 heading-heading {
  Padding: 0.6em 1.2em;
  Latar Belakang - Warna: #cde;
  Border-bottom: 1px solid # 678;
}
.Panel-pos & gt; h3 {
  Ukuran font: 1.25EM;
  MARGIN: 0;
  Surat-spasi: 0,03EM;
}
.Panel-body {
  Padding: 0.6em 1.2em;
}

Anda dapat mengalikan nilai padding dengan ukuran font mereka untuk menentukan nilai-nilai komputasi mereka (9.6px vertikal dan 19.2px horizontal). Sejujurnya, tidak masalah. Cobalah untuk tidak macet dengan pengukuran pixel-sempurna. Ini mungkin terasa canggung, tetapi tekan. Semakin banyak Anda menggunakan EMS, semakin Anda akan terbiasa dengan mereka sebagai unit dengan hormat mereka sendiri.

Penskalaan secara dinamis desain

Ketika kita membuat modul yang dapat digunakan kembali seperti ini, kita sering menemukan kita membutuhkan beberapa variasi. Katakanlah kami ingin membuat versi yang lebih besar. Jika kami menggunakan PX untuk semuanya, ini berarti meningkatkan ukuran font, padding, radius perbatasan dan sebagainya. Namun, karena kami telah mendefinisikan segala sesuatu dalam kaitannya dengan satu ukuran font berbasis REM, kita hanya perlu mengubah nilai itu, dan seluruh modul akan merespons:

 .panel - besar {ukuran font: 1.2Rem; }

Kami cukup menambahkan kelas ini ke panel untuk membuatnya lebih besar: & lt; div class = "panel panel - besar" & gt; . Ini akan mengubah definisi lokal EM, dan dengan demikian radius perbatasan dan padding juga berubah, seiring dengan ukuran font elemen-elemen anaknya. Dengan satu deklarasi, kami telah mengubah ukuran setiap bagian dari modul.

A panel module, with paddings and border radius defined using ems — Modul panel, dengan paddings dan radius perbatasan yang didefinisikan menggunakan EMS

Demikian juga, kami dapat membuat versi kecil:

 .Panel - Kecil {ukuran font: 0.8REM; }

Dengan membumikan modul menggunakan ukuran font tingkat atas dalam REMS, kami telah membuatnya stabil dan dapat diprediksi. Dengan mendefinisikan segala sesuatu yang lain dalam menggunakan EMS, kami telah membuat semua bagian komponennya dapat diskalakan.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Dimungkinkan untuk mendasarkan ukuran semua yang ada di dalam modul pada satu nilai, kemudian ubah nilai itu untuk skala semuanya

Ini adalah pola yang kuat. Anda dapat menggunakan pendekatan ini untuk apa pun di halaman Anda, dari menu drop-down ke tombol media sosial. Ground modul dengan nilai REM, kemudian gunakan EM untuk hampir semua hal lain dari Paddings untuk memposisikan ukuran ikon.

Membuatnya responsif

Mari kita dorong prinsip satu tingkat lebih lanjut. Kami telah menebus modul (dan secara teoritis semua modul lain pada halaman) menggunakan REMS dan EMS. Ini pada akhirnya berarti ukurannya didasarkan pada ukuran font elemen akar. Kemudian, kita dapat menyesuaikan nilai tunggal ini untuk membuat seluruh halaman merespons pada gilirannya.

Mari kita bawa unit relatif lain: vh. . Nilai komputasi unit ini berasal dari ukuran layar pengguna; Sama dengan 1 persen dari lebar viewport. Jika kita menggunakan unit VH untuk menentukan ukuran font root, itu akan secara otomatis berskala responsif, query media sans. Atur ukuran font pada root ke 2VW. :

 html {
  Ukuran font: 2VW;
}

Sayangnya, efeknya agak terlalu kuat. Pada iPhone 6, misalnya, ini akan menghitung hingga 5.5px, yang terlalu kecil. Demikian juga, itu sangat besar di layar yang lebih besar. Untuk melembutkan efeknya, kita dapat menggunakan CSS Calc () fungsi:

 html {
  Ukuran font: Calc (0.6em + 1vw);
}

Sekarang ukuran font diturunkan sebagian dari nilai yang stabil, dan sebagian dari yang responsif. Ini menghasilkan efek yang jauh lebih baik. Itu 0.6em. berperilaku sebagai semacam ukuran font minimum. Sekarang root em akan menskala dengan lancar dari sekitar 13px pada smartphone ke 21px pada layar desktop rata-rata.

Dengan halaman Anda yang terdiri dari modul yang dapat diskalakan, masing-masing didasarkan pada nilai REM, dan mereka juga akan berskala dengan viewport. Halaman disusun dengan hierarki tiga tingkat; Anda dapat mengubah ukuran seluruh halaman, modul individual, atau elemen tunggal dengan membuat edit sederhana ke ukuran font. Percayai EMS dan REMS, dan browser akan mengurus pekerjaan untuk Anda.

Anda mungkin masih perlu menambahkan kueri media sesekali untuk mengontrol pembungkus lini dan beberapa masalah responsif lainnya. Tetapi sedikit kode ini dikombinasikan dengan kebiasaan menggunakan EMS dan REMS akan membuat Anda jauh di sana.

Artikel ini awalnya ditampilkan dalam Net Magazine. masalah 288; Beli di sini

Artikel terkait:

10 Trik Tipografi Setiap desainer harus tahu
Panduan Desainer untuk Tipografi dan Font
Tipografi Web Guru yang Dapat Diakses

merancang situs responsif dengan ukuran berbasis EM

Unit ukuran font

Membangun Modul dengan EMS

Penskalaan secara dinamis desain

Membuatnya responsif

Bagaimana caranya - Artikel Terpopuler

Semua yang perlu Anda ketahui tentang pemisahan kode JavaScript

Bagaimana cara mengubah font di Bio Twitter Anda

Buat gerakan dinamis dalam suatu komposisi

Cara membuat logo retro dengan perancang afinitas

Cara merancang formulir responsif dan device-agnostik

cat dikontrol dan stroke yang halus dengan cara yang luar biasa

Tambahkan isyarat visual ke situs Anda

10 Aturan Emas untuk SVG Responsif

Kategori