Em trong HTML là gì?
Relative Units trong CSS hay các đơn vị tương đối thường được sử dụng để tạo các trang web responsive, lý do là chúng có tỷ lệ phụ thuộc vào các parent element hay window size (tùy thuộc vào đơn vị chúng ta sử dụng). Show Khi sử dụng các đơn vị tương đối để style cho trang web, chúng ta có thể tránh phải set lại các style như width, font-size, padding, margin... cho các kích thước màn hình khác nhau 🌝. Trong CSS chúng ta có các Relative Units như: %, VH, VW, REM, EM,... Hôm nay chúng ta sẽ tìm hiểu về hai đơn vị REM và EM, đây là hai đơn vị thường gây nhầm lẫn cho các bạn trong quá trình học CSS. Mình xin chỉ ra một số điểm khác biệt chính của hai đơn vị REM và EM trong bài viết này ^^. REM trong CSSREM trong CSS được viết gọn lại của root em. Nó có nghĩa là "The root element's font-size", hiểu đơn giản REM trong CSS sẽ được tính toán dựa trên kích thước font-size của html(root). Nếu chúng ta không set cho HTML root một giá trị font-size, giá trị mặc định của font-size khi đó sẽ là 16px. Do đó, khi phần tử sử dụng đơn vị REM, phần tử này sẽ tìm để phần tử root xem giá trị font-size là bao nhiêu để tính toán và set giá trị. Chúng ta cùng xem một ví dụ để hiểu hơn về REM trong CSS nhé:
Mình sẽ demo sử dụng một container có class
Lúc này chúng ta sẽ thấy phần tử 2 sẽ có font-size bằng với font-size của phần tử root là 4. Lý do là chúng ta đã thêm cho root một font-size mới khác với giá trị ban đầu là 16px. Khi đó, một phần tử bất kỳ sử dụng rem sẽ được 6, tương tự ta có 7.Khi phần tử root các bạn không set font-size cho nó, lúc này root sẽ có giá trị 8 và 1rem lúc này là 8.Giả sử chúng ta muốn padding cho phần tử child, với giá trị sau khi sử dụng REM tương đương với 30px thì sẽ tính toán thế nào? Chúng ta sẽ lấy 30/16 để đổi sang đơn vị REM đúng không 😃. Chúng ta sẽ được như sau:
Với 30px ta sẽ đổi sang rem là 0 với 1 😊.Tiếp theo chúng ta sẽ cùng xem thử, với đơn vị 2, việc tính toán khác gì với 3 không nhé!EM trong CSSVới đơn vị EM trong CSS, nó khác với REM ở chỗ nó sẽ sử dụng Mình sẽ sử dụng phần tử
Với font-size của parent là 20px, khi phần tử 1, kích thước font sẽ là 10px, vì 2.Giả sử chúng ta không set 8.
Cùng set thử cho
Chúng ta dễ dàng tính toán được 1 ? Câu trả lời là không chính xác 🥶. Tại sao lại không đúng, lý do là vì trong child chúng ta đã sử dụng font-size cho phần tử, lúc này các thuộc tính trong phần tử child sẽ tính toán dựa trên font-size của child (Nếu có).Như vậy height sẽ có giá trị 7 và padding là 8.Trong một số trường hợp, nếu chúng ta sử dụng EM trong các phần tử thuộc nhiều parent, các thuộc tính EM có thể sẽ khó sử dụng, ví dụ như:
Khi set 0 sử dụng EM, chúng ta sẽ phải xem phần tử parent có font-size là bao nhiêu, nếu parent sử dụng EM ta sẽ phải tìm trên nó xem font-size có giá trị và đơn vị là gì 🥴. Chính vì lí do này mình hay sử dụng đơn vị REM hơn.Kết luậnCuối cùng mình xin ra một tổng kết nhỏ về EM và REM:
Cá nhân mình hay sử dụng đơn vị REM hơn EM, vì sử dụng REM cho padding, margin, height, font-size,... chúng ta có các giá trị dựa trên Em trong CSS là gì?em: là đơn vị tham chiếu tỷ lệ so với phần tử cha trực tiếp chứa nó hoặc chính nó dựa vào giá trị của thuộc tính là font-size.
PX trong html là gì?px : đây là đơn vị thường thấy được sử dụng trên màn hình hiển thị, 1px tương đương với một điểm ảnh trên màn hình hiển thị. Tuy nhiên pixels (px) có tính tương đối so với chế độ view của thiết bị, phụ thuộc vào mức dpi (dots per inch) của thiết bị.
Em có đơn vị là gì?em : Là đơn vị tham chiếu tỷ lệ so với phần tử mẹ của nó dựa vào giá trị của thuộc tính font-size . Ví dụ bạn đặt cho font-size cho phần tử mẹ của nó là 19px thì nếu bạn sử dụng em trong khu vực phần tử đó thì 1em = 19px.
Thế i làm gì?Thẻ có thể được sử dụng để chỉ một thuật ngữ kỹ thuật, một cụm từ trong một ngôn ngữ khác, một ý nghĩ hoặc tên một con tàu, vân vân… Chỉ sử dụng phần tử khi không có một yếu tố ngữ nghĩa thích hợp hơn, chẳng hạn như: (nhấn mạnh văn bản) (văn bản quan trọng)
|