[CSS] Em Và Rem Trong CSS - Frontend Master
Có thể bạn quan tâm
1. Rem là gì
Rem là viết tắt của từ root element. Khi chúng ta khai báo font-size hay bất cứ thuộc tính nào dựa theo rem thì nó sẽ phụ thuộc vào font-size của thẻ html.
Ví dụ ta style thẻ html như sau
html { font-size: 16px; }Khi đó ta style cho thẻ p như sau
p { font-size: 2rem; }Ở đây ta có thẻ html có font-size là 16px nên thẻ p cũng có font-size là 32px (2 X 16px). Nếu thẻ html có font-size là 20px thì thẻ p có font-size là 40px(2 X20px).
2. Em là gì
Em phụ thuộc vào thẻ gần nhất chứa nó có thuộc tính font-size. Nếu thẻ cha không có nó lại tìm lên cấp cha to hơn. Nếu tất cả các thẻ chứa nó không có thuộc tính font-size nó sẽ ăn theo thẻ html.
<div style="font-size: 20px;"> <p class="zoro" id="zoro">SBTC ZORO</p> </div> p { font-size: 2em; }Ở đây thẻ chưa thẻ p là thẻ div có font-size là 20px nên thẻ p sẽ có font-size là 40px(2X20px). Nếu bỏ style của thẻ div thì font-size của thẻ p là 32px vì khi đó nó ăn theo font-size của thẻ html(2 X 16px).
Rem được sử dụng nhiều hơn em vì nó dễ custom. Ví dụ trên mobile bạn muốn cỡ chữ to lên thì chỉ cần sửa font-size của thằng html, còn nếu em thì phải tìm rất nhiều chỗ để sửa.
Share this:
Related
Từ khóa » Em Trong Css
-
Em, Rem Trong Css - Viblo
-
[CSS] Cách Sử Dụng đơn EM Và REM Trong CSS - Viblo
-
[Học CSS] Tìm Hiểu Về đơn Vị Px, Pt, Percentages, Em Và Rem
-
Các đơn Vị Px Em Rem Mm đo độ Dài Trong CSS
-
Tìm Hiểu đơn Vị EM Và REM - Evondev Blog
-
CSS Units - Tìm Hiểu Về REM Và EM Trong CSS - Homiedev
-
3 đại Lượng Số đo Trong CSS: Rem, Em Và Pixel. Nên Dùng Cái Nào?
-
Sự Khác Nhau Giữa đơn Vị Em Và đơn Vị Rem Trong CSS - YouTube
-
Các Đơn Vị Tính Trong CSS - CodeLearn
-
Các đơn Vị đo độ Dài Trong Css: Px, Mm, Cm, Em, Rem - Code & Coffe
-
Chuyển đổi Từ Px Sang Em Trong CSS
-
Sự Khác Biệt Giữa Rem Và EM Trong CSS, Vh Và Vw Trong Responsive
-
Đơn Vị Trong CSS: Pixels, EM, Và Phần Trăm
-
[CSS] Cách Sử Dụng đơn EM Và REM Trong CSS