Thiết kế một trang web đáp ứng với kích thước dựa trên EM

Sep 14, 2025

Cách

Có lẽ bạn đã nghe nói rằng bạn nên sử dụng các đơn vị tương đối cho kích thước phông chữ. Đây là một quy tắc tốt cho thiết kế web có thể truy cập; Nếu người dùng thay đổi kích thước phông chữ mặc định của trình duyệt,, điều này cho phép văn bản trang của bạn thay đổi kích thước tương ứng. Bạn có thể đã lấy lời khuyên này và thực hiện công tắc. Có lẽ bạn đã nhận được máy tính của bạn và chuyển đổi kích thước phông chữ của trang web của bạn khỏi tuyệt đối px. đơn vị cho EMS hoặc, nhiều khả năng, rems.

Nhưng nếu đó là nơi bạn dừng lại, bạn đang bỏ lỡ rất nhiều tính linh hoạt và sức mạnh mà EMS mang đến trình duyệt. Đơn vị EM không chỉ đơn giản là một sự thay thế cho sự quen thuộc px. Được; Bạn có thể sử dụng nó để có nhiều thuộc tính hơn là chỉ cỡ chữ . Nếu bạn làm như vậy, một số lợi ích khác của nó bắt đầu xuất hiện.

Bằng cách nhất quán sử dụng EMS, bạn có thể thiết kế các thành phần trên trang phản hồi tự động nếu kích thước phông chữ thay đổi. Sau đó, với một mẹo thông minh cho kích thước phông chữ đáp ứng, bạn có thể tạo toàn bộ một trang điều chỉnh động dựa trên chiều rộng của trình xem của trình duyệt. Hãy để tôi chỉ cho bạn cách tận dụng hành vi 'tương đối' của EMS để tạo ra các thiết kế có thể mở rộng và đáp ứng.

Đơn vị kích thước phông chữ

Sử dụng EMS cho kích thước phông chữ có thể khó khăn. Giá trị chính xác được xác định bởi kích thước phông chữ được kế thừa của phần tử (I.E. Kích thước phông chữ của phần tử cha). Điều này trở nên phức tạp khi bạn bắt đầu các yếu tố làm tổ sâu hơn. Nếu một phần tử có kích thước phông chữ trong EMS, cha mẹ của nó có kích thước phông chữ trong EMS và cha mẹ của nó có một kích thước khác. Bạn sẽ phải nhân tất cả các giá trị này để xác định giá trị được tính toán thực tế của phần tử con.

Điều này có nghĩa là đặt cùng một mô-đun trong các thùng chứa khác nhau có thể thay đổi ý nghĩa của EM. Các mô-đun sẽ không thể đoán trước.

Để tránh điều này, chúng tôi thường sử dụng một đơn vị tương đối khác nhau cho kích thước phông chữ: rems. Một rem (hoặc 'root EM') không dựa trên kích thước phông chữ được kế thừa, mà trên kích thước phông chữ của phần tử gốc của trang, & lt; html & gt; . Điều này có nghĩa là giá trị của nó là giống nhau trên toàn trang. Nó có thể dự đoán được hơn, và thường thích hơn, EMS thông thường.

Xây dựng một mô-đun với EMS

Hãy sử dụng các đơn vị tương đối để xây dựng một mô-đun. Tuy nhiên, chúng tôi sẽ không tuân theo cách tiếp cận chung. Thay vì sử dụng REM cho mọi thứ, chúng tôi sẽ chỉ sử dụng nó một lần: trên phần tử trên cùng của mô-đun. Điều này sẽ thiết lập kích thước phông chữ đã biết cho mô-đun, thay vì nó dựa trên chuỗi giá trị EM không thể đoán trước phía trên nó trong DOM. Điều đó có nghĩa là chúng ta có thể dễ dàng chia tỷ lệ kích thước của mô-đun bằng cách ghi đè lên một giá trị duy nhất.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Sử dụng các rems trên phần tử ngoài cùng để thiết lập kích thước phông chữ đã biết, sau đó sử dụng EMS để xây dựng dựa trên giá trị đó

Sau khi chúng tôi thiết lập kích thước phông chữ đã biết này, chúng tôi an toàn để sử dụng EMS thông thường trong toàn bộ mô-đun. Sử dụng nó không chỉ cho bất kỳ kích thước phông chữ nào trên các yếu tố phụ mà còn đối với hầu hết các thuộc tính khác, bao gồm đệm Cái gì lề và bán kính biên giới. .

Chúng tôi sẽ xây dựng một bảng điều khiển với một tiêu đề và một cơ thể. Đánh dấu trông như thế này:

 & lt; div class = "panel" & gt;
  & lt; div class = "tiêu đề bảng" & gt;
    & lt; H3 & GT; Kìa sức mạnh của EMS & LT; / H3 & GT;
  & lt; / div & gt;
  & lt; div class = "panel-body" & gt;
    Xem xét những cách bạn có thể tận dụng tương đối
    Các đơn vị để kích thước động của các mô-đun của bạn.
  & lt; / div & gt;
& lt; / div & gt;

Hãy theo phong cách container bên ngoài. Chúng tôi sẽ đặt kích thước phông chữ tại 1REM. để thiết lập giá trị EM địa phương của chúng tôi. Sau đó chúng ta sẽ xác định bán kính biên giới. sử dụng EMS. Tuy nhiên, tôi thường muốn sử dụng PX cho Border để có được một dòng tốt đẹp.

 .Panel {
  Kích thước phông chữ: 1rem;
  Biên giới: 1px Solid # 678;
  bán kính biên giới: 0,3em;
  tràn: ẩn;
}

Tiếp theo, phong cách các yếu tố bên trong. Chúng tôi sẽ sử dụng EMS để đệm. Sau đó, chúng tôi sẽ tăng kích thước phông chữ của nhóm lên 1,25 lần giá trị EM cục bộ của chúng tôi, tạo ra kích thước tính toán 20px.

 .Panel-Heading {
  Đệm: 0,6EM 1.2EM;
  Màu nền: #cde;
  Border-Dưới: 1px Solid # 678;
Không thể
.Panel-Heading & GT; H3 {
  Kích thước phông chữ: 1.25EM;
  Biên độ: 0;
  Khoảng cách thư: 0,03EM;
Không thể
. -Panel-body {
  Đệm: 0,6EM 1.2EM;
}

Bạn có thể nhân các giá trị phần đệm bằng kích thước phông chữ của chúng để xác định các giá trị được tính toán của chúng (9,6px dọc và 19,2px ngang). Thật ra, mặc dù, nó không thành vấn đề. Cố gắng không bị sa lầy với các phép đo hoàn hảo pixel. Điều này có thể cảm thấy lúng túng, nhưng nhấn vào. Bạn càng sử dụng EMS, bạn sẽ càng làm quen với chúng với tư cách là một đơn vị trong sự tôn trọng của chính họ.

Quy mô linh hoạt thiết kế

Khi chúng ta tạo các mô-đun tái sử dụng như thế này, chúng ta thường thấy chúng ta cần một vài biến thể. Nói rằng chúng tôi muốn tạo ra một phiên bản lớn hơn. Nếu chúng ta đang sử dụng PX cho tất cả mọi thứ, điều này có nghĩa là tăng kích thước phông chữ, phần đệm, bán kính đường viền và như vậy. Tuy nhiên, vì chúng tôi đã xác định mọi thứ liên quan đến một kích thước phông chữ dựa trên REM, chúng ta chỉ cần thay đổi giá trị đó và toàn bộ mô-đun sẽ phản hồi:

 .panel - lớn {cỡ chữ: 1.2rem; }

Chúng tôi chỉ cần thêm lớp này vào một bảng điều khiển để làm cho nó lớn hơn: & lt; div class = "bảng điều khiển - lớn" & gt; . Điều này sẽ thay đổi định nghĩa cục bộ của một em, và do đó cũng là bán kính biên giới và thay đổi đệm, cùng với kích thước phông chữ của các yếu tố con của nó. Với một tuyên bố duy nhất, chúng tôi đã thay đổi kích thước mọi phần của mô-đun.

A panel module, with paddings and border radius defined using ems — Một mô-đun bảng điều khiển, với mái chèo và bán kính biên giới được xác định bằng EMS

Tương tự như vậy, chúng ta có thể tạo một phiên bản nhỏ:

 .panel - nhỏ {kích thước phông chữ: 0,8rem; }

Bằng cách nối đất mô-đun bằng kích thước phông chữ cấp cao nhất trong các rems, chúng tôi đã làm cho nó ổn định và có thể dự đoán được. Bằng cách xác định mọi thứ khác trong việc sử dụng EMS, chúng tôi đã tạo ra tất cả các bộ phận thành phần của nó có thể mở rộng.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Có thể dựa trên kích thước của mọi thứ bên trong mô-đun trên một giá trị, sau đó thay đổi giá trị đó để mở rộng tất cả

Đây là một mô hình mạnh mẽ. Bạn có thể sử dụng phương pháp này cho bất cứ điều gì trên trang của bạn, từ các menu thả xuống đến các nút truyền thông xã hội. Ground mô-đun có giá trị REM, sau đó sử dụng EM cho hầu như mọi thứ khác từ các cổng để định vị thành kích thước biểu tượng.

Làm cho nó đáp ứng

Hãy đẩy nguyên tắc một cấp độ hơn nữa. Chúng tôi đã kích thước mô-đun (và về mặt lý thuyết tất cả các mô-đun khác trên trang) bằng cách sử dụng REMS và EMS. Điều này cuối cùng có nghĩa là kích thước của chúng dựa trên kích thước phông chữ của phần tử gốc. Sau đó, chúng ta có thể điều chỉnh giá trị duy nhất này để làm cho toàn bộ trang phản hồi lần lượt.

Hãy mang theo một đơn vị tương đối khác: vh. . Giá trị tính toán của đơn vị này có nguồn gốc từ kích thước màn hình của người dùng; Nó bằng 1 phần trăm chiều rộng của chế độ xem. Nếu chúng ta sử dụng đơn vị VH để xác định kích thước phông chữ gốc, nó sẽ tự động đánh giá nhanh chóng, Sans Truy vấn phương tiện. Đặt kích thước phông chữ trên gốc sang 2vw. :

 HTML {
  Kích thước phông chữ: 2VW;
}

Thật không may, hiệu quả hơi quá mạnh. Trên iPhone 6, ví dụ, điều này sẽ tính toán lên 5,5px, quá nhỏ. Tương tự như vậy, nó rất lớn trên màn hình lớn hơn. Để làm mềm hiệu ứng, chúng tôi có thể sử dụng CSS Calc () chức năng:

 HTML {
  Kích thước phông chữ: Calc (0,6EM + 1VW);
Không thể

Bây giờ kích thước phông chữ được lấy một phần từ giá trị ổn định và một phần từ một giá trị đáp ứng. Điều này tạo ra một hiệu ứng tốt hơn nhiều. Các 0,6EM. hành xử như một loại kích thước phông chữ tối thiểu. Bây giờ root EM sẽ quy mô trôi chảy từ khoảng 13px trên điện thoại thông minh đến 21px trên màn hình máy tính để bàn trung bình.

Với trang của bạn được tạo thành từ các mô-đun có thể mở rộng, mỗi trang có căn cứ vào giá trị REM và chúng cũng sẽ chia tỷ lệ với chế độ xem. Trang được cấu trúc với hệ thống phân cấp ba tầng; Bạn có thể thay đổi kích thước của toàn bộ trang, một mô-đun riêng lẻ hoặc một phần tử duy nhất bằng cách chỉnh sửa đơn giản với kích thước phông chữ. Tin tưởng vào EMS và REMS, và trình duyệt sẽ chăm sóc công việc cho bạn.

Bạn vẫn có thể cần thêm truy vấn phương tiện truyền thông thường xuyên để kiểm soát việc gói dòng và một số mối quan tâm đáp ứng khác. Nhưng một chút mã nhỏ này kết hợp với thói quen sử dụng EMS và REM sẽ giúp bạn có được rất nhiều cách đó.

Bài viết này ban đầu được đặc trưng trong Tạp chí Net. phát hành 288; Mua nó ở đây

Những bài viết liên quan:

10 thủ đoạn typography Mỗi nhà thiết kế nên biết
Hướng dẫn của nhà thiết kế về kiểu chữ và phông chữ
Master Kiểu chữ Web có thể truy cập

Thiết kế một trang web đáp ứng với kích thước dựa trên EM

Đơn vị kích thước phông chữ

Xây dựng một mô-đun với EMS

Quy mô linh hoạt thiết kế

Làm cho nó đáp ứng

Cách - Các bài báo phổ biến nhất

Cách thiết lập và tối ưu hóa cửa hàng SmugMug của bạn

Cách thêm hình ảnh động vào SVG bằng CSS

Hướng dẫn sinh sản: Công cụ mới được khám phá

Cách truyền đạt âm thanh trong một bức tranh

Tuổi một bức ảnh trong Photoshop CC

Cách nhận thêm từ kết cấu kỹ thuật số

Cách đặt tên cho cơ quan thiết kế web của bạn

Cách tạo một giàn ruy băng linh hoạt

Thể loại