Thông tin màn hình

DPR là số pixel vật lý trên mỗi pixel CSS. DPR 2 cho biết màn hình Retina, hình ảnh cần chuẩn bị gấp 2 lần để hiển thị sắc nét.

Độ phân giải màn hình là tổng số pixel vật lý của màn hình, còn viewport là vùng hiển thị nội dung trong trình duyệt, không bao gồm thanh công cụ và thanh cuộn.

Gắn điểm ngắt theo tên thiết bị cụ thể chỉ bảo đảm rằng chúng sẽ hỏng ngay khi có máy mới ra mắt. Thay vào đó, hãy cắt ở nơi chính bố cục bắt đầu trông sai. Trên thực tế 480, 768, 1024 và 1280 px là những điểm khởi đầu quen thuộc, nhưng đó chỉ là những con số dễ nhớ chứ không phải quy tắc. Hãy thu hẹp cửa sổ trình duyệt thật chậm và để ý chiều rộng mà dòng chữ dài quá mức hay thẻ nội dung bị bẹp; đặt điểm ngắt đúng chỗ đó sẽ bền hơn nhiều.

Vì điểm ảnh CSS là đơn vị của kích thước biểu kiến chứ không phải chấm vật lý. Trên màn hình 4K đặt tỉ lệ hiển thị 200%, 3840 chấm vật lý được trình bày thành 1920 điểm ảnh CSS, và chính điều đó khiến chữ với biểu tượng trông dày dặn, sắc nét hơn. Khi ấy tỉ lệ điểm ảnh thiết bị là 2, nên muốn ảnh vẫn nét thì phải cung cấp thêm tệp có độ phân giải gấp đôi kích thước hiển thị thông qua srcset.