rem vs em Unit trong CSS
Ta có nhiều lựa chọn tốt khi nói đến các đơn vị trong CSS. Trong thế giới thiết kế đáp ứng ngày nay, các đơn vị tương đối như đơn vị em hoặc đơn vị rem mang lại cho ta khả năng thích ứng và tính linh hoạt ngay lập tức cho phép kích thước dựa trên (các) kích thước phông chữ được xác định cao hơn trong đánh dấu.Có thể bạn đã sử dụng đơn vị em và rem trong một thời gian, nhưng bạn có thể tự hỏi về sự khác biệt chính xác giữa hai đơn vị này và đơn vị nào phù hợp hơn cho các trường hợp sử dụng của bạn. Hãy chia nhỏ nó càng ngắn càng tốt.
Tóm tắt: đơn vị em cho thuộc tính font-size sẽ tương đối với kích thước phông chữ của phần tử mẹ. các đơn vị em trên các thuộc tính khác với kích thước phông chữ sẽ tương ứng với kích thước phông chữ của phần tử hiện tại. Kích thước đơn vị rem sẽ luôn tương ứng với kích thước phông chữ của phần tử html root .
em Unit
em được mượn từ thế giới typography và nó là một đơn vị cho phép cài đặt kích thước phông chữ của một phần tử so với kích thước phông chữ của phần tử gốc của nó.
Hãy lấy ví dụ đơn giản sau:
.parent { font-size: 18px; } .child { font-size: 1.5em; } Với ví dụ đó, con sẽ có kích thước phông chữ là 27px (1.5 * 18px = 27px) .
Nếu phần tử mẹ không chỉ định giá trị cho kích thước phông chữ , một giá trị sẽ được tìm kiếm cao hơn trong cây DOM. Nếu không có kích thước phông chữ nào được chỉ định cho đến phần tử root ( <html> ), thì mặc định của trình duyệt là 16px sẽ được sử dụng.
Khá đơn giản và dễ hiểu phải không? em đơn vị được dùng cho nhiều hơn chỉ là cài đặt font-size tuy nhiên, và họ được dùng khá nhiều ở khắp mọi nơi đơn vị đang mong đợi (đệm, lề, chiều rộng, chiều cao, chiều rộng tối đa, ... bạn sẽ có được hình ảnh!) Khi em đơn vị được sử dụng trên các thuộc tính khác ngoài kích thước phông chữ , giá trị tương đối với kích thước phông chữ của chính phần tử.
Hãy thêm vào ví dụ của ta :
.parent { font-size: 18px; } .child { font-size: 1.5em; padding: 2em 1em; } - Phần đệm trên và dưới của
.childsẽ là 54px . Đó là 2 lần kích thước phông chữ của kích thước phông chữ phần tử hiện tại của ta ( 2 * 27px ) - Phần đệm bên trái và bên phải trên
.childsẽ có kích thước 27px . Đó là 1 lần kích thước phông chữ của phần tử của ta .
Lưu ý : khi các đơn vị em được sử dụng trên kích thước phông chữ , kích thước tương đối với kích thước phông chữ của chính. Khi được sử dụng trên các thuộc tính khác, nó liên quan đến kích thước phông chữ của chính phần tử đó.
Hiệu ứng tổng hợp: Rắc rối trong thiên đường
Lúc này, mọi thứ đều tốt và tốt với việc sử dụng đơn vị em , nhưng một vấn đề có thể xuất phát từ thực tế là đơn vị có thể ghép từ cấp độ này sang cấp độ khác.
Hãy giữ một ví dụ cơ bản tương tự:
.parent { font-size: 15px; } .child { font-size: 2em; } Nhưng hãy sử dụng nó trong đánh dấu của ta như sau:
<div class="parent"> I'm 15px <div class="child"> I'm 30px, as expected <div class="child"> I'm 60px, trouble starts! <div class="child"> I'm 120px, now we're really in trouble! </div> </div> </div> </div> Vì vậy, như bạn thấy , hiệu ứng của các đơn vị em có thể được cộng dồn khi nhiều phần tử có kích thước phông chữ em nằm trong nhau. Điều này có thể trở thành một vấn đề và có thể dẫn đến những hậu quả không mong muốn trong các thiết kế của bạn.
Vấn đề này là lý do tại sao đơn vị rem được tạo ra.
đơn vị rem
Đơn vị rem , viết tắt của root em là một đơn vị tương đối sẽ luôn dựa trên giá trị font-size của phần tử root , là phần tử <html> . Và nếu phần tử <html> không có kích thước phông chữ được chỉ định, thì mặc định của trình duyệt là 16px sẽ được sử dụng.
Vì vậy, điều đó nghĩa là , bằng cách sử dụng đơn vị rem , giá trị của các phần tử mẹ bị bỏ qua và chỉ giá trị của phần tử root được xem xét.
Với một ví dụ tương tự, nhưng trong rem:
.html { font-size: 16px; } .parent { font-size: 15px; } .child-rem { font-size: 2rem; } <div class="parent"> I'm 15px <div class="child-rem"> I'm 32px, as expected <div class="child-rem"> I'm 32px, yep! <div class="child-rem"> I'm 32px, like clockwork! </div> </div> </div> </div> Như bạn thấy , việc sử dụng đơn vị rem cho phép ta tránh hiệu ứng kép của đơn vị em . Với rem mọi thứ luôn và nhất quán dựa trên kích thước phông chữ hoặc phần tử root , vì vậy không có gì ngạc nhiên.
Tương tự với các giá trị khác ngoài kích thước phông chữ (lề, đệm,…) Việc sử dụng các đơn vị rem trên các giá trị đó sẽ vẫn tương đối với kích thước phông chữ của phần tử root .
em vs rem, cái nào tốt hơn?
Không có đơn vị nào thực sự tốt hơn, và tất cả phụ thuộc vào sở thích cá nhân của bạn. Một số người thích thiết kế mọi thứ theo đơn vị rem để có tính nhất quán và dễ dự đoán, trong khi những người khác cũng thích sử dụng đơn vị em ở những nơi mà ảnh hưởng của các yếu tố mẹ gần đó sẽ có ý nghĩa.
Các tin liên quan
Tạo kiểu cho thanh cuộn bằng CSS: Cách hiện đại để tạo kiểu cho thanh cuộn2020-09-02
Tạo các phần tử dính trong CSS Vị trí sử dụng: dính
2020-09-02
Đầu vào biểu mẫu tạo kiểu trong CSS Với: bắt buộc,: tùy chọn,: hợp lệ và: không hợp lệ
2020-09-02
Tạo mặt nạ image trong CSS bằng thuộc tính mask-image
2020-09-02
Hướng dẫn thực hành để sử dụng CSS Vị trí tương đối & tuyệt đối
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Tham khảo: Tên màu CSS
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Thuộc tính z-index CSS Mighty
2020-09-01
CSS: focus-trong Pseudo-Class
2020-09-01
