em
và rem
áp dụng hợp lý? em
và rem
là 2 đơn vị đo kích thước tương đối được sử dụng rộng rãi trong frond-end. Nhưng việc áp dụng nó là một điều không đơn giản.
Thế nào là em
và rem
em
là gì?
em
là đơn vị tham chiếu tỷ lệ so với phần tử cha của nó dựa vào giá trị của thuộc tính font-size
.
sử dụng em
khi bạn muốn thay đổi kích thước thành phần con của một block
thông qua việc định nghĩa tỉ lệ font-size
của thành phần cha.
nghĩa là sẽ biến đổi dựa vào giá trị font-size
của phần tử cha của nó.
Ví dụ:
<div style="font-size:15px;"> <p style="font-size: 1em;"> font-size = "15px" </p> <p style="font-size: 2em;"> font-size = "30px" </p> </div>
rem là gì?
rem
là đơn vị tham chiếu tỷ lệ so với phần tử gốc của một website dựa vào thuộc tính font-size
.
sử dụng rem
khi bạn muốn thay đổi kích thước tất cả các thành phần thông quan một thay đổi font-size
chính của toàn trang.
nghĩa là nếu bạn thay đổi font-size
cố định của thẻ html
thì tất các các thành phần sẽ thay đổi tỷ lệ với thẻ html
.
ví dụ:
<!DOCTYPE html> <html lang="en" style="font-size: 16px;"> <body> <p style="font-size: 1rem;"> font-size= "16px" </p> <p style="font-size: 2rem;"> font-size= "32px" </p> </body> </html>
Một số trường hợp em
và rem
áp dụng linh hoạt?
Trường hợp áp dụng với thẻ heading:
Ví dụ chúng ta có 1 thẻ h2
sử dụng rem
:
<h2 class="header"> heading </h2> <h2 class="header header--large"> heading </h2> <style> .header { font-size: 1rem; padding: 0.5rem 0.75rem; } .header--large { font-size: 2rem; padding: 1rem 1.5rem; } </style>
Ở đây như chúng ta thấy thì các thẻ .header--large
có font-size
lớn gấp đôi thẻ .header
nên có padding
cũng lớn gấp đôi.
Trông thật là khoa học :). Nhưng phải làm như thế nào nếu chúng ta muốn thay đổi font-size
của các thẻ header
mà không ảnh hưởng đến padding
.
<h2 class="header"> heading </h2> <h2 class="header header--large"> heading </h2> <style> .header { font-size: 1rem; padding: 0.5em 0.75em; } .header--large { font-size: 2rem; } </style>
Khi bạn tăng font-size
lên 2rem
thì padding
của thẻ tự động tăng tỉ lệ theo font-size
. Như vậy bạn đã thấy đáp án là chúng ta sẽ sử dụng em
, khi padding
bằng thẻ .header
bằng em
thì padding
này luôn tỷ lệ với font-size
thẻ .header
.
Nếu chỉ sử dụng em
cho các thẻ heading.
<h2 class="header"> heading </h2> <h2 class="header header--large"> heading </h2> <style> .header { font-size: 1em; padding: 0.5em 0.75em; } .header--large { font-size: 2em; } </style>
Một trang web bao giờ cũng sẽ có rất nhiều thẻ headding, nếu sử dụng em trong trường hợp chữ được căn trái hoặc phải thì rõ ràng padding-left
, padding-right
của thẻ .header--large
trong trường hợp trên sẽ bị gấp đôi bên .header
? Thế chả lẽ được các thẻ .header chỗ thò ra chỗ thụt vào.
em và rem áp dụng chúng để giải quyết
Giải pháp ở đây là chúng ta sử dụng rem với padding-left
, padding-right
. Nếu ta sử dụng rem ở đây nó sẽ tỷ lệ với font-size của thẻ html
nên kích thước padding-left
, padding-right
không bị thay đổi khi ta thay đổi font-size
của thẻ .header
<h2 class="header"> heading </h2> <h2 class="header header--large"> heading </h2> <style> .header { padding: 0.5em 0.75rem; font-size: 1em; } .header--large { font-size: 2em; } </style>
Kết quả :
Như vậy chúng ta đã có một thẻ heading với phần:
padding-top
vàpadding-bottom
thay đổi tỷ lệ vớifont-size
của chính nó.- và phần
padding-left
,padding-right
không bị ảnh hưởng.
Việc em và rem áp dụng responsive trở nên nên khoa học hơn.
Đúng như vậy mọi thứ sẽ luôn tỉ lệ với nhau. bạn chỉ cần điều chỉnh font-size
của thẻ html
bằng css responsive.
<!DOCTYPE html> <html lang="en"> <body> <h2 class="header"> heading </h2> <h2 class="header header--large"> heading </h2> <style> .header { padding: 0.5em 0.75rem; font-size: 1em; } .header--large { font-size: 2em; } html { font-size: 30px; } @media only screen and (max-width: 1500px) { html { font-size: 10px; } } </style> </body> </html>
Kết Luận em và rem áp dụng trong thực tế:
em
và rem
đều được sử dụng đơn giản và linh động trong quá trình response.
nhưng việc sử dụng em
và rem
bừa bải sẽ gây khó khăn trong quá trình response của bạn.
việc em và rem áp dụng thực tế là quá trình cần phải có những ràng buộc nhất định.
Tham khảo: