Responsive

Ba giá trị, và chỉ ba. small 640 là ranh giới điện thoại / máy tính bảng. medium 960 là ranh giới máy tính bảng / laptop. wide 1280 là nơi bố cục ngừng giãn và bắt đầu căn giữa. Viết theo mobile-first: luật mặc định là luật của màn hình hẹp nhất, rồi min-width mở rộng.

Kiểm. grep -n "@media" trên mọi stylesheet. Mọi giá trị ngưỡng phải là 640px, 960px, 1280px hoặc đúng tương đương rem của chúng.

Ở 320 CSS px, nội dung đọc được mà không cần cuộn theo hai chiều. Cuộn dọc là bình thường; cuộn ngang toàn trang là lỗi. Ngoại lệ được phép: một bảng rộng, một sơ đồ, một khối mã — những thứ này được cuộn ngang bên trong hộp của chính nó.

Kiểm. Đặt viewport 320 × 640 và cuộn từ đầu tới cuối mỗi loại trang. document.scrollingElement.scrollWidth không được lớn hơn clientWidth.

Không user-scalable=no, không maximum-scale dưới 5. Text phóng tới 200% vẫn giữ đủ nội dung và chức năng. Sàn 16px cho input trên mobile: dưới đó iOS tự phóng khi focus.

Không khoá hướng. Một trang đọc được ở dọc phải đọc được ở ngang — người dùng gắn thiết bị vào giá đỡ, hoặc không xoay được thiết bị vì lý do vận động.

Kiểm. Xoay thiết bị hoặc đổi kích thước viewport sang tỉ lệ ngang ở chiều cao thấp.

Đặt bề rộng cố định bằng px cho một vùng nội dung là điều cấm — dùng minmax(0, 1fr) để ô grid được phép co.