Hướng dẫn px trong css - px trong css

Mặc dù có lẽ mình sẽ cần nói qua hơi nhiều các khái niệm cơ bản trước khi bắt đầu với việc tìm hiểu các thuộc tính CSS. Dù mất thời gian hơn nhưng nó sẽ giúp bạn đỡ bối rối về sau này khi gặp những khái niệm đó.

Một trong các khái niệm thường gặp nhất là hiểu đơn vị đo lường được sử dụng khi viết CSS, mặc dù có nhiều loại đơn vị nhưng bạn có thể chỉ cần sử dụng một loại đơn vị khi làm website, hoặc là hai chứ không bắt buộc là dùng hết. Nhưng nếu bạn hiểu rõ về nó thì bạn sẽ dễ dàng hơn trong việc tính toán đo lường các phần tử trong website.

Tham khảo: Giải thích ý nghĩa các đơn vị tại Mozilla Developers Network: Giải thích ý nghĩa các đơn vị tại Mozilla Developers Network

Trong bài này mình chỉ đề cập đến các đơn vị thường dùng.

Về đơn vị, thì trong CSS có hai loại đơn vị là Absolute Units [đơn vị tuyệt đối] và Relative Units [đơn vị tương đối]. Trong đó:Absolute Units [đơn vị tuyệt đối] và Relative Units [đơn vị tương đối]. Trong đó:

Đơn vị tuyệt đối

Là các đơn vị vật lý đã được định nghĩa sẵn và đại diện cho các đơn vị đo lường vật lý. Các đơn vị này không bị phụ thuộc và không hề thay đổi bởi bất cứ tác động nào. Ví dụ như đơn vị mét, xen-ti-mét,..là các đơn vị tuyệt đối.

Các đơn vị tuyệt đối sử dụng trong CSS gồm có:

• px: Đây là một đơn vị được sử dụng trên màn hình hiển thị, một px sẽ tương đương với một điểm ảnh trên màn hình hiển thị. Chất lượng của điểm ảnh sẽ hoàn toàn khác nhau trên một số thiết bị, ví dụ như một điểm ảnh trên các thiết bị in ấn sẽ khác với một điểm ảnh trên các thiết bị màn hình độ phân giải thấp.
• pt: Đơn vị point và cứ 1 ich = 72pt.

Xem ví dụ: //codepen.io/thachpham92/pen/QwXWJJ/

Đơn vị tương đối

Là các đơn vị đo lường được sử dụng trong CSS ở mức tương đối, nghĩa là nó có thể sẽ được thay đổi bởi các thành phần khác ví dụ như thay đổi phụ thuộc vào kích thước màn hình.

Các đơn vị tương đối được sử dụng trong CSS gồm có:

• % [percentages]: Là đơn vị tham chiếu tỷ lệ so với một phần tử mẹ của nó dựa vào kích thước. Ví dụ bạn có một cái khung với kích thước là 500px và khung bên trong có kích thước là 50% thì nó sẽ là 250px. Nếu bạn sử dụng đơn vị phần trăm này để gán kích thước cho thẻ  trên website thì nó sẽ thay đổi theo kích thước màn hình hoặc/cửa sổ website.
• 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.

• 
    hi
  
  
  
    :root {
      font-size: 16px;
    }
      
    div {
      font-size: 0.5rem; // 8px
    }
  
    p {
      font-size: 1em; // ??px
    }
  
  

  0: 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, nghĩa là sẽ biến đổi tùy theo giá trị của thuộc tính font-size trong thẻ . Cũng như rem, nếu bạn khai báo font-size cho thẻ  là 16px thì 1rem = 16px.

Ví dụ về đơn vị %.

Xem ví dụ: //codepen.io/thachpham92/pen/ogrNJY/

Ví dụ về đơn vị em

Xem ví dụ: //codepen.io/thachpham92/pen/bNPGOj/

Còn đơn vị

  hi



  :root {
    font-size: 16px;
  }
    
  div {
    font-size: 0.5rem; // 8px
  }

  p {
    font-size: 1em; // ??px
  }

Lời kết

Bây giờ bạn đã hiểu ý nghĩa của từng đơn vị chưa nào? Thực ra trên tất cả các đơn vị trên thì bạn nên sử dụng đơn vị px cho dễ nếu bạn mới bắt đầu học CSS hoặc làm giao diện website đơn giản, còn các đơn vị khác bạn sẽ có dịp sử dụng khi đã có kinh nghiệm sử dụng CSS để làm các giao diện phức tạp hơn.

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.

Đầu tiên tôi biết các bạn đọc bài viết này đã code CSS rất nhiều, kiểu nhiều vãi ấy và chắc chắn 100% rằng các bạn đã từng sử dụng ít nhất một trong số các đại lượng của CSS để căn chỉnh các số đo liên quan đến Margin, Padding, Width, Height,...Margin, Padding, Width, Height,...

Một trong số tức là kiểu có nhiều ấy: px, rem, em,pt, vh, wh,... Có thể có nhiều bạn sẽ thấy không quen với việc sử dụng rem hay em mà thường sử dụng px hơn, nhất là các bạn new dev còn đang học về HTML và CSS, thì trong bài viết này tôi sẽ chỉ ra một vài điều về những điểm khác biệt cụ thể của 3 đại lượng này và từ đó các bạn sẽ có thể suy ra được khi nào nên dùng cái gì.px, rem, em,pt, vh, wh,... Có thể có nhiều bạn sẽ thấy không quen với việc sử dụng rem hay em mà thường sử dụng px hơn, nhất là các bạn new dev còn đang học về HTML và CSS, thì trong bài viết này tôi sẽ chỉ ra một vài điều về những điểm khác biệt cụ thể của 3 đại lượng này và từ đó các bạn sẽ có thể suy ra được khi nào nên dùng cái gì.

Hãy nói về cách hoạt động của các đại lượng này trước đã

Rem

Rem là viết tắt của root element's font-size là viết tắt của root element's font-size

Trong hầu hết các trường hợp chúng ta có root font-size là

  hi



  :root {
    font-size: 16px;
  }
    
  div {
    font-size: 0.5rem; // 8px
  }

  p {
    font-size: 1em; // ??px
  }

Và vì root font-size là một thuộc tính CSS nên chúng ta hoàn toàn có thể ghi đè giá trị khác lên cho nó:

:root {
  font-size: 20px;
}

Khi này giá trị

  hi



  :root {
    font-size: 16px;
  }
    
  div {
    font-size: 0.5rem; // 8px
  }

  p {
    font-size: 1em; // ??px
  }

  
    With rem
    rem: 16px
    rem: 32px
  

  
    With em
    em: 16px
    em: 32px
  

Nếu bạn sử dụng đại lượng Rem thì giá trị của nó sẽ tỉ lệ với giá trị mà bạn cài đặt trong root, như ở ví dụ trên là 20px vậy nếu tôi có một đoạn CSS như này:

  
    With rem
    rem: 16px
    rem: 32px
  

  
    With em
    em: 16px
    em: 32px
  

  
    With rem
    rem: 16px
    rem: 32px
  

  
    With em
    em: 16px
    em: 32px
  

  
    With rem
    rem: 16px
    rem: 32px
  

  
    With em
    em: 16px
    em: 32px
  

  
    With rem
    rem: 16px
    rem: 32px
  

  
    With em
    em: 16px
    em: 32px
  

Việc sử dụng Rem có thể sẽ gây chút bối rối cho người mới sử dụng, tuy nhiên điểm lợi mà nó mang lại đó là bạn có thể dễ dàng tùy biến các kích thước mà không cần phải sử code ở quá nhiều vị trí. Nếu bạn có vọc vạch vào một số các CSS framework như Tailwind, Bootstrap,... thì sẽ thấy Rem được sử dụng rất nhiều và họ ít có những cú hardecode bằng px lắmRem được sử dụng rất nhiều và họ ít có những cú hardecode bằng px lắm

Bởi vì em có tính kế thừa nên nó sẽ giúp cho việc căn chỉnh padding và margin được đồng nhất hơn. Trong ví dụ trên tôi có 2 nhóm button:em có tính kế thừa nên nó sẽ giúp cho việc căn chỉnh padding và margin được đồng nhất hơn. Trong ví dụ trên tôi có 2 nhóm button:

• Nhóm With rem sử dụng đại lượng rem làm số đo cho thuộc tính font-size và padding trong mỗi button. Khi button tăng kích cỡ font lên 32px thì padding của button vẫn không đổi do rem kế thừa kích cỡ từ root nên cho dù font-size có thay đổi thì cũng không ảnh hưởng đến paddingWith rem sử dụng đại lượng rem làm số đo cho thuộc tính font-size và padding trong mỗi button. Khi button tăng kích cỡ font lên 32px thì padding của button vẫn không đổi do rem kế thừa kích cỡ từ root nên cho dù font-size có thay đổi thì cũng không ảnh hưởng đến padding
• Nhóm With em sử dụng đại lượng em làm số đo cho padding mà font-size lúc này đang là 2rem 32px, do đó 1em lúc này sẽ bằng 32px, vậy padding: 0.75em 1.5em lúc này chính lần lượt bằng: 48px và 24px, tỉ lệ thuận với kích thước của font-size. Khiến cho button trông hài hòa hơn khá là nhiềuWith em sử dụng đại lượng em làm số đo cho padding mà font-size lúc này đang là 2rem 32px, do đó 1em lúc này sẽ bằng 32px, vậy padding: 0.75em 1.5em lúc này chính lần lượt bằng: 48px và 24px, tỉ lệ thuận với kích thước của font-size. Khiến cho button trông hài hòa hơn khá là nhiều

Mặc dù em và rem thật sự tốt hơn và linh hoạt hơn so với việc hardcore số đo bằng px nhưng trong một số trường hợp bạn vẫn phải dung px cho các kích cỡ nhỏ, ví dụ như border chẳng hạn.em và rem thật sự tốt hơn và linh hoạt hơn so với việc hardcore số đo bằng px nhưng trong một số trường hợp bạn vẫn phải dung px cho các kích cỡ nhỏ, ví dụ như border chẳng hạn.