Các trường hợp nên sử dụng px, % hoặc em trong CSS

Hầu hết chúng ta thường sử dụng pixel(px) để xác định kích thước của các phần tử HTML, nhưng ở bài viết này mình muốn mở rộng hơn nữa để các bạn có thể hiểu tại sao trong từng trường hợp sử dụng đơn vị khác nhau hiệu quả nhất

Khi nào sử dụng % hiệu quả nhất

% là một đơn vị được tính dựa trên việc so sánh kích thước của phần tử với kích thước của phần tử mẹ của nó

Áp dụng cho trường hợp cột

Chúng ta sẽ đi vào trường hợp cụ thể với ví dụ HTML sau

<div class="fullwidth">
    <div class="left-column">Nội dung cột trái...</div>
    <div class="right-column">Nội dung cột phải...</div>
</div>

Và nếu ta sử dụng phương pháp thông thường với px sẽ như sau

.fullwidth {
  width:600px;
  overflow:hidden;
}

.left-column {
  width:400px;
  float:left;
}

.right-column {
  width:200px;
  float:right;
}

Ta hiểu rằng div có class fullwidth có chiều rộng là 600px, cột phải có class right-column là 200px và cột trái có class left-column là 600px.
So sánh với việc nếu ta sử dụng % cho trường hợp này như sau

.fullwidth {
  width:600px;
  overflow:hidden;
}

.left-column {
  width:60%;
  float:left;
}

.right-column {
  width:40%;
  float:right;
}

Dễ dàng nhận biết được lợi ích trong trường hợp này là khi bạn muốn thay đổi chiều rộng của div có class fullwidth thì cột trái và cột phải trong nó sẽ giữ nguyên tỷ lệ, bạn không cần phải tính toán lại nữa, cũng rất hữu ích cho các template responsive
Để hiểu rõ hơn các bạn có thể thử nhập vào bản demo bên dưới

Áp dụng cho trường các thẻ H

Khi ta sử dụng px

body {
  font-size:13px;
  font-family:Arial,Sans-Serif;
}

h1 {font-size:28px}
h2 {font-size:25px}
h3 {font-size:22px}
h4 {font-size:19px}
h5 {font-size:16px}
h6 {font-size:13px}

Trong trường hợp bạn áp dụng responsive, khi hiển thị trên mobile sẽ giữ nguyên size chữ ban đầu hoặc bạn phải thay đổi như sau

@media (max-width:360px) {
  body {font-size:11px}
  h1 {font-size:26px}
  h2 {font-size:23px}
  h3 {font-size:20px}
  h4 {font-size:17px}
  h5 {font-size:14px}
  h6 {font-size:11px}
}

Rất là mất thời gian đúng không?
Thay vì vậy khi bạn áp dụng % cho trường hợp này

body {
  font-size:13px;
  font-family:Arial,Sans-Serif;
}

h1 {font-size:200%}
h2 {font-size:180%}
h3 {font-size:160%}
h4 {font-size:140%}
h5 {font-size:120%}
h6 {font-size:100%}

Và khi áp dụng responsive ta chỉ việc thay đổi như sau

@media (max-width:360px) {
  body {font-size:11px}
}

Các thẻ H sẽ theo tỷ lệ % mà giảm xuống nhìn sẽ hợp lý hơn và bạn cũng không mất thời gian sửa cho từng thẻ H nữa

Khi nào sử dụng em hiệu quả nhất

em là đơn vị được tính dựa trên kích thước của văn bản. Ví dụ kích thước văn bản là 13px, thì 1em sẽ tương đương với 13px. Ví dụ:

Khi ta sử dụng px

body {font-size:13px} 
p {
  line-height:18px;
  margin:13px 0;
}

Tương đương với px khi ta sử dụng em

body {font-size:13px} /* 1em = 13px */
p {
  line-height:1.384615384615385em; /* 18 / 13 */
  margin:1em 0;
}

Tuy nhiên nếu ta thay đổi kích thước mặc định của body lớn hơn nếu áp dụng px trong trường hợp này đoạn văn bản sẽ bị xấu, mọi người có thể xem ảnh ví dụ bên dưới để hiểu rõ hơn về vấn đề

Khi nào sử dụng px hiệu quả nhất

Đơn vị pixel sẽ hiệu quả nhất khi áp dụng cho các phần tử yêu cầu kích thước chính xác và không bị ảnh hưởng bởi kích thước của các phần tử xung quanh. Ví dụ: kích thước của biểu tượng cần cố định, độ dày đường viền, kích thước văn bản nội dung chính trên website.

Kết luận

Đọc đến đây chắc anh em cũng đã nắm khá rõ về sự khác nhau và ứng dụng tốt nhất cho từng trường hợp với px, %, em trong CSS rồi đúng không? Nếu có vấn đề gì cần hỗ trợ hay góp ý, hãy để lại ý kiến tại phần nhận xét. Thank anh em, chúc mừng năm mới! 🎊🧧