Sử dụng đơn vị EM hay REM ?

nên sử dụng đơn vị em hay rem

Sau khi viết xong bài trước về sự khác nhau giữa 2 đơn vị em và rem thì nhiều bạn có nói rằng “nếu có demo thì tốt hơn” thế nên hôm nay mình viết bài “nên sử dụng em hay rem vào dự án” này kèm theo demo là 1 trang mình cắt đơn giản sử dụng 2 đơn vị này. Các bạn có thể xem tại đây.

Việc sử dụng đơn vị nào hay như thế nào là tùy thuộc vào mỗi người có thể là do công ty yêu cầu hoặc bạn quen sử dụng đơn vị này, đơn vị kia rồi. Bài này mình chia sẻ về cách của mình, nếu các bạn thích các bạn có thể áp dụng, nếu không thì thôi hihi.

# Áp dụng

Đầu tiên thì các bạn inspect code(F12) rồi các bạn chọn thẻ <html> các bạn sẽ thấy mình set giá trị của thuộc tính font-size: 62.5%. Tại sao vậy ?

html {
  font-size: 62.5%;
}

Ở bài trước mình có nói mặc định font-size ở hầu hết trình duyệt là 16px tức là 100%. Nghĩa là 1em = 1rem = 100% = 16px. Thế mình muốn có một div nào đó có width là 50px đi thì mình phải tính toán 50px / 16px được bao nhỉ ? Lấy máy tính ra tính à được 3.125(em-rem). Như vậy mất thời gian quá nhỉ ?

Đó là lý do mình set ở thẻ <html> font-size 62.5%. 100% thì được 16px suy ra 62.5% thì được 10px. Lúc này 1em = 1rem = 10px. Hehe. Giờ box có width 50px à dễ thôi cho width = 5rem là xong vì giờ tính toán lẹ hơn, tính được trong đầu ngay lập tức 50/10 = 5.

Thế là mình áp dụng chúng vào cái template này như thế. Các bạn có thể thấy cách mình làm ở div có class task__item(F12 rồi chọn thẻ div có class này nhé)

.task__item {
    margin-bottom: 4rem;
    padding: 2.5rem;
    background-color: white;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
}

Mình cho margin-bottom 4rem thì sẽ tương ứng 40px vì đơn vị rem chỉ phụ thuộc vào thẻ<html> nên mình không lo lắng.

Tại sao mình không chọn em trong trường hợp này là vì nó phụ thuộc vào giá trị của thuộc tính font-size của chính nó hoặc phần tử cha chứa nó nên mình sợ nảy sinh nhiều vấn đề. Các bạn xem ví dụ dưới nè.

.task__item {
    margin-bottom: 4em;/*Mình đổi ở đây*/
    padding: 2.5rem;
    background-color: white;
    -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
    font-size: 2rem;/*Thêm thuộc tính font-size vô đây*/
}

Giờ mình thay đổi giá trị margin-bottom thành 4em và thêm font-size2rem(20px) thì lúc này margin-bottom 4em sẽ tương đương với 80px chứ ko phải là 40px như của đơn vị rem, như vậy sẽ không được như bạn mong muốn. Các bạn phải tính toán kỹ khi dùng với đơn vị em nhé.

Đơn vị rem và em khi dùng margin-bottom

Bây giờ khi resize xuống màn hình nhỏ hơn như IPad, Mobile mình thấy toàn website kích thước to quá nhìn không hợp. Thay vì chỉnh từng cái thì mình set giá trị font-size của thẻ <html> xuống còn 50%(bao nhiêu % tùy design hoặc yêu cầu) lúc này toàn bộ size sẽ nhỏ lại theo size của từng element.

html {
 font-size: 50%; /* Các bạn có thể set bao nhiêu tùy yêu cầu hay design nhé */
}

Các bạn có thể mở template mình đã làm rồi Inspect code, resize trình duyệt và check code để xem cách mình áp dụng đơn vị rem như thế nào nhé. Nếu không hiểu thì có thể bình luận ở dưới mình sẽ trả lời nha.

Ah còn 1 điểm lưu ý nữa đó là trong @media queries mình ít sử dụng px hay là rem mà mình lại sử dụng em. Ở đây mình nói là bên trong cái dấu () của @media queries chớ không phải nội dụng bên trong dấu {} này nha các bạn đừng hiểu sai ý mình.

@media only screen and (max-width: 60em /*giá trị này*/){}

Có rất nhiều lý do ở đây giữa 3 đơn vị này khi dùng cho @media queries. Nó rất dài để giải thích nên mình có tìm tòi và đọc được 1 bài viết khá hay, chi tiết nói về vấn đề này các bạn có thể xem tại đây nha.

# Lời kết

Thì theo quan điểm của mình thì mình sử dụng cả 2 vào project luôn. Đơn vị rem thì dùng cho toàn website kết hợp với px ở những chi tiết nhỏ như border 1px solid #abc chẳng hạn và đơn vị em thì dùng trong @media queries.

Còn các bạn thì dùng như thế nào ? Cùng chia sẻ ở bên dưới bình luận nhé. Hi vọng với những kiến thức mà mình chia sẻ sẽ giúp ích cho các bạn phần nào trong việc học tập và code. Chúc các bạn ngày tốt lành.

Subscribe
Notify of
guest

27 Comments
Inline Feedbacks
View all comments
That-Nguyen
That-Nguyen

Em mới học và toàn xài px cho mấy câu media query :v , chắc phải xem xét việc đến việc xài đơn vị em.

vanviet
vanviet
Reply to  evondev

Bài viết rất hay, cám ơn anh nhiều nhé.
Mong được đọc thêm nhiều bài viết hay từ anh.

Nhankiat
Nhankiat

Đối với đơn vị pixel nếu như ở trong @media thì có 480px, 767px, 1200px còn đối với đơn vị em thì anh dùng ntn vào project của anh vậy ?

Nhankiat
Nhankiat
Reply to  evondev

dạ e cảm ơn anh

tung thanh
tung thanh

hay quá cám ơn bác

Nguyen Phuong
Nguyen Phuong

Bài viết rất hay.
Rất mong được xem thêm nhiều bài viết của anh nữa.

Bảo Nguyễn
Bảo Nguyễn

Tip Trick rất hay và bổ ích. Cám ơn chủ thớt nhiều ạ 😀

Việt Anh
Việt Anh

Sau khi đọc bài về việc dùng em trong media query, thì e tìm tiếp có bài này https://adamwathan.me/dont-use-em-for-media-queries/ . A xem thử xem 🙂

Quỳnh
Quỳnh

Bài viết rất hay và sáng tạo. ♥♥

huy
huy

Sau khi đọc bài này https://adamwathan.me/dont-use-em-for-media-queries/ thì vẫn giữ quan điểm sử dụng rem cho toàn website, px cho media queries 🙂

dat
dat
Reply to  huy

đã update lại rồi

Mai Huong
Mai Huong

I really like your blogs. It’s useful and legible… Thank you so much!

Mai Huong
Mai Huong
Reply to  Mai Huong

dễ hiểu và hiểu sâu ạ

ffd
ffd
Reply to  Mai Huong

hihi

Trường Dũ
Trường Dũ

Bài viết của anh rất dễ hiểu.
Anh cho em hỏi ngoài lề xíu. Cho em hỏi đa số các công ty sử dụng bootstrap hay flex, grid vậy anh. Em đang muốn tập trung 1 cái để code front end cứng hơn.
Cảm ơn anh! Chúc anh sức khỏe 🙂

Hulkk
Hulkk

nai xừ