Bạn sẽ chọn đơn vị theo nhu cầu: chữ dễ điều chỉnh, vùng nội dung có giới hạn và hộp không tràn màn hình. Không có một đơn vị duy nhất phù hợp cho mọi thuộc tính.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Đơn vị không chỉ là thay px bằng rem

CSS px là đơn vị tham chiếu của CSS, không phải cam kết một pixel vật lý trên mọi màn hình. rem liên quan cỡ chữ gốc; em trong font-size dựa vào cỡ chữ cha, còn trong nhiều thuộc tính độ dài khác dựa vào cỡ chữ của chính phần tử. Nếu lồng nhiều em mà không hiểu nguồn, kích thước có thể nhân lên.

Phần trăm phụ thuộc thuộc tính và ngữ cảnh. width:50% thường liên quan chiều rộng containing block, nhưng không được suy ra mọi thuộc tính phần trăm đều lấy cùng một mốc. Hãy đọc định nghĩa của thuộc tính đang dùng.

Cho nội dung đủ chỗ, không kéo quá dài

Vùng bài viết thường cần chiều rộng tối đa để dòng chữ không quá dài trên màn hình lớn, đồng thời có thể co lại trên màn hình nhỏ. Dùng width theo khả năng vùng chứa kết hợp max-width thay vì ấn định 1200px cho mọi thiết bị.

min-width có thể ngăn hộp co; max-width giới hạn kích thước tối đa. Khi cả hai cùng xuất hiện, không nên chỉ nhìn width để đoán kết quả. Để chiều cao tự nhiên giúp nội dung dài hơn không bị cắt chỉ vì một số đo phù hợp với đoạn văn mẫu.

calc và min có ích khi đọc được ý nghĩa

Ví dụ width:min(100%,32rem) chọn giá trị nhỏ hơn giữa vùng có sẵn và 32rem. calc có thể kết hợp một phép tính độ dài, nhưng dấu cộng/trừ cần khoảng trắng theo cú pháp. Không tạo công thức dài để thay một bố cục Flexbox/Grid vốn đơn giản hơn.

clamp có thể tạo kích thước nằm giữa giới hạn dưới và trên, thường hữu ích cho chữ linh hoạt. Ở giai đoạn này, hãy hiểu các mốc trước khi chép một công thức có vw mà chưa kiểm tra zoom và kích thước chữ thực tế.

Áp dụng cho hộp đọc và khoảng cách

Dùng rem cho một số khoảng cách và cỡ chữ giúp chúng gắn với thiết lập chữ, nhưng không có quy tắc bắt buộc mọi border 1px cũng phải đổi sang rem. Chọn theo vai trò: đường viền mảnh, vùng nội dung và tiêu đề có nhu cầu khác nhau.

Thử cửa sổ hẹp và một đoạn văn dài hơn. Nếu phải sửa nhiều số cố định mỗi lần thay nội dung, hãy xem lại cách đặt giới hạn thay vì chỉ giảm mọi kích thước theo cùng một tỷ lệ.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<div class="measure-box"><p>Một vùng đọc có chiều rộng tối đa, nhưng vẫn co lại trong vùng chứa.</p><p>Thử thay cỡ chữ gốc và quan sát rem.</p></div>

Thêm hoặc sửa trong styles.css

.measure-box {
  width: min(100%, 32rem);
  padding: 1rem;
  border: 1px solid #a8bfd1;
  margin-block: 1rem;
}
.measure-box p { margin-block: 0 1em; }

So sánh trước và sau

Vùng ví dụ không vượt 32rem và không cố giữ bề rộng lớn khi vùng chứa hẹp. Hãy mở tab riêng và đổi chiều rộng để thấy khác biệt với hộp cố định.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Nói 1rem luôn bằng 16px: còn phụ thuộc font-size gốc và thiết lập người dùng.
• Đặt height cố định cho mọi đoạn: để nội dung quyết định chiều cao khi phù hợp.
• Dùng 100vw cho vùng có padding rồi tràn: xem cả scrollbar, box model và containing block.

Tự kiểm tra

• Đổi 32rem thành 24rem và giải thích giới hạn nào đang tác động.
• So sánh 50% và 20rem trong hai vùng chứa có độ rộng khác nhau.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML