CSS: làm trang dễ đọc và responsive

CSS dễ đọc tạo type scale rõ, line length thoải mái, contrast đủ, spacing nhất quán và layout thích nghi từ màn hình hẹp tới rộng. Responsive design đi theo nhu cầu content, không theo danh sách tên thiết bị.

Nhìn nhanh

Câu hỏi	Câu trả lời thực tế
Dùng khi nào?	Trang tài liệu có thể dùng main column fluid nhưng giới hạn khoảng 70 ký tự, sidebar collapse và card grid tăng cột khi đủ không gian.
Cần làm gì?	Style một article theo mobile-first, kiểm tra keyboard focus và zoom, rồi chỉ thêm breakpoint khi content thật sự cần.
Biết là đúng bằng cách nào?	Ở 320px và zoom 200% không có horizontal scroll để đọc, focus vẫn thấy rõ và hierarchy không phụ thuộc riêng vào màu.
Lỗi hay gặp?	Tránh fixed height cho vùng text và breakpoint tùy tiện sao chép từ thiết kế khác.

flowchart LR
  A[Câu hỏi] --> B[CSS: làm trang dễ đọc và responsive]
  B --> C[Ví dụ nhỏ]
  C --> D[Bằng chứng]

Điểm quan trọng của sơ đồ là không dừng ở định nghĩa: hãy nối khái niệm với một ví dụ nhỏ và bằng chứng có thể quan sát.

Ví dụ đã phân tích

Trang tài liệu có thể dùng main column fluid nhưng giới hạn khoảng 70 ký tự, sidebar collapse và card grid tăng cột khi đủ không gian.

Trước khi làm, hãy viết dấu hiệu thành công. Sau đó chỉ thay đổi một yếu tố, quan sát kết quả và ghi lại assumption. Với CSS: làm trang dễ đọc và responsive, cách này giúp tách điều bạn biết khỏi điều bạn chỉ đang đoán.

Thực hành trong 20–30 phút

Mục tiêu: Style một article theo mobile-first, kiểm tra keyboard focus và zoom, rồi chỉ thêm breakpoint khi content thật sự cần.

1. Ghi lại trạng thái ban đầu và điều bạn dự đoán.
2. Thực hiện phiên bản nhỏ nhất, không thêm công cụ chưa cần thiết.
3. Thay đổi đúng một input hoặc constraint rồi chạy lại.
4. Lưu command, screenshot, output hoặc checklist làm bằng chứng.

Kết quả mong đợi: Ở 320px và zoom 200% không có horizontal scroll để đọc, focus vẫn thấy rõ và hierarchy không phụ thuộc riêng vào màu.

Sai ở đâu và sửa thế nào

Tránh fixed height cho vùng text và breakpoint tùy tiện sao chép từ thiết kế khác.

Khi kết quả khác dự đoán, đừng đổi nhiều thứ cùng lúc. Kiểm tra input, version, environment, quyền truy cập và log trước; sau đó lặp lại từ ví dụ nhỏ nhất.

Định nghĩa hoàn thành

• Tôi giải thích được khái niệm bằng ngôn ngữ của mình.
• Tôi đã hoàn thành ví dụ nhỏ và giữ bằng chứng.
• Tôi biết một failure mode và cách kiểm tra nó.
• Người khác có thể làm lại mà không phải đoán bước còn thiếu.

Đi sâu hơn

Mở resource hoặc repository đi kèm ở cuối trang khi bạn cần implementation đầy đủ. Hãy kiểm tra version hiện hành trước khi dùng command trong dự án thật.