Giá như rem và em thật đơn giản!
Đơn vị trong website khá là nhiều và ai cũng biết như: chú px, cô %, bé rem, bé em, cậu vh, mợ vw bà con nó còn nhiều thôi kể nhiêu đây thôi. Thứ mà ta hay dùng nhiều nhất là chú px, tiếp theo đó là cô % một cơ số dùng bé em, rem Thật ra rem em px điều có các mối qua hệ như gia đình với nhau ...
Đơn vị trong website khá là nhiều và ai cũng biết như:
chú px, cô %, bé rem, bé em, cậu vh, mợ vw bà con nó còn nhiều thôi kể nhiêu đây thôi.
Thứ mà ta hay dùng nhiều nhất là chú px, tiếp theo đó là cô % một cơ số dùng bé em, rem
Thật ra rem em px điều có các mối qua hệ như gia đình với nhau trong đó chú px đóng vai trò là cột mốc 16px = 1em or 1rem. Cột mốc này bạn có thể thay đổi.
Thay đổi khi dùng Rem, Em: thường được sử dụng cho font-size nhưng nếu thích thì bạn có thể dùng cho tất cả, chỉ chịu khó tính toán 1 - 2 tiếng đồng hồ thôi.
Tôi đùa đấy, với em bạn chỉ cần biết được kích cỡ font-size hiện tại của mình và tha hồ sử dụng.
Lưu ý:
- Vì bé em ngoan nên kích thước của em bằng với kích thước font hiện tại đang được sử dụng trên website.
- Bé em rất ngoan nên nó chỉ thừa hưởng kích thước của cấp cha nó.
- Đặt biệt nếu bé em bị lòng cấp thì bạn có thể nhận được những giá trị rất thú vị như các trường họp này
<html>
<style>
html {font-size: 10px;}
.be-em {font-size: 2em; /*20px;*/}
ul li {font-size: 2rem; /*20px;*/}
</style>
<body>
<div class="be-em">
Font size 2em = 20px
<div class="be-em">
Font size 2em = 40px
</div>
</div>
<ul>
<li>
Font size 2em = 20px
<ul>
<li>
Font size 2em = 40px
</li>
</ul>
</li>
</ul>
</body>
</html>
Link demo:
Vì em khá là ngoan nên rem ra đời với tư cách ngoan hơn và dễ sử dụng hơn với việc chỉ nghe lời 1 cấp html(root), có nghĩa là bạn chỉ cần qui định font-size cho thẻ html và toàn bộ rem bên trong sẽ phụ thuộc vào nó.
Việc tính toán sẽ không mất 1-2h nữa mà sẽ ít hơn khi sử dụng.
<html>
<style>
html {font-size: 10px;}
.be-em {font-size: 2rem; /*20px;*/}
ul li {font-size: 2rem; /*20px;*/}
</style>
<body>
<div class="be-rem">
Font size 2rem = 20px
<div class="be-rem">
Font size 2rem = 20px
</div>
</div>
<ul>
<li>
Font size 2rem = 20px
<ul>
<li>
Font size 2rem = 40px
</li>
</ul>
</li>
</ul>
</body>
</html>
Đặt biệt với nhu cầu các thím iphone, ipad, smartphones ngày càng nhiều, bạn chỉ cần thay đổi font-size cho từng kích thước thôi cũng là cả 1 vấn đề.
Nhưng với Rem thì bạn chỉ cần tùy chỉnh 1 nơi ở html(root) thì việc quản lý kích thước font-size cho từng device của bạn sẽ trở nên dễ dàng hơn.
html {font-size: 16px;} /*thay đổi font-szie 1 chổ này*/
h1 {font-size: 3rem; /*48px*/}
h2 {font-size: 2rem; /*32px*/}
h3 {font-size: 1rem; /*16px*/}
/*device <<< 992 Tablets*/
@media (max-awidth: 991px) {
html {font-size: 14px;} /*thay đổi font-szie 1 chổ này*/
h1 {font-size: 3rem; /*42px*/}
h2 {font-size: 2rem; /*28px*/}
h3 {font-size: 1rem; /*14px*/}
}
/*device <<< 768 Phones*/
@media (max-awidth: 767px) {
html {font-size: 12px;} /*thay đổi font-szie 1 chổ này*/
h1 {font-size: 3rem; /*36px*/}
h2 {font-size: 2rem; /*24px*/}
h3 {font-size: 1rem; /*12px*/}
}
Rem cũng có thể được sử dụng cho awidth height và nhiều thuộc tính khác.
Túm lại
Điểm mấu chốt là ẽm rất trung thành với cấp html(root) nên rất dễ cho bạn tùy chỉnh.
Không tốn nhiều css cho các device khác nhau.
Nó rất hay nhưng không phải thay thế hết cho tất cả website, đối với các đối tượng tuyệt đối như border, awidth, height, margin, padding v.v… thì ta nên dùng px để chắc chắn là nó không sai 1 ly.
