TL; DR
Nếu bạn đang tạo một trang web đáp ứng, hãy sử dụng min-width/ max-widthtrong các truy vấn phương tiện của bạn thay vì min-device-width/ max-device-widthđể nhắm mục tiêu nhiều kích thước màn hình hơn.
Theo dự thảo thông số kỹ thuật Media Queries Cấp 4 năm 2018 , device-widthtính năng media không được dùng nữa . Nó sẽ được giữ lại để tương thích ngược, nhưng nên tránh.
8. Phụ lục A: Các tính năng phương tiện không được dùng nữa
Để truy vấn cho kích thước của khung nhìn (hoặc hộp trang trên phương tiện truyền thông), thì width, heightvà aspect-ratiocác tính năng truyền thông nên được sử dụng, chứ không phải là device-width, device-heightvà device-aspect-ratio, trong đó đề cập đến kích thước vật lý của các thiết bị bất kể có bao nhiêu khoảng trống sẵn sàng cho tài liệu đang được trình bày. Các device-*tính năng phương tiện đôi khi cũng được sử dụng như một proxy để phát hiện thiết bị di động. Thay vào đó, các tác giả nên sử dụng các tính năng phương tiện thể hiện tốt hơn khía cạnh của thiết bị mà họ đang cố gắng tạo kiểu cho nó.
Ngoài ra, hãy nhớ chỉ định thẻ meta chế độ xem trong <head>phần tài liệu của bạn:
<meta name="viewport" content="width=device-width, initial-scale=1">
Giải trình
Do tất cả các độ phân giải màn hình và mật độ pixel có thể có khác nhau mà một thiết bị nhất định có thể có, pixel không phải là pixel vì có một số điều cần xem xét (thu phóng, mật độ pixel, độ phân giải và kích thước màn hình, hướng thiết bị, tỷ lệ khung hình, v.v. ..). Trong trường hợp này, một pixel thực sự được gọi là "đơn vị tham chiếu quang học" chứ không phải là pixel phần cứng vật lý.
May mắn thay, bạn có thể chỉ định thẻ meta chế độ xem trong <head>phần tài liệu của mình để kiểm soát chiều rộng và tỷ lệ của chế độ xem của trình duyệt. Nếu thẻ này có contentgiá trị là width=device-width, chiều rộng của màn hình sẽ khớp với các pixel độc lập trên thiết bị và sẽ đảm bảo rằng tất cả các thiết bị khác nhau phải mở rộng quy mô và hoạt động nhất quán.
<meta name="viewport" content="width=device-width, initial-scale=1">
Về các truy vấn phương tiện, bạn có thể sẽ muốn sử dụng max-widthhơn là max-device-widthvì max-widthsẽ nhắm mục tiêu chế độ xem (cửa sổ trình duyệt hiện tại), trong khi max-device-widthsẽ nhắm mục tiêu kích thước / độ phân giải toàn màn hình thực tế của thiết bị.
Nói cách khác, nếu đang sử dụng max-device-width, bạn sẽ không thấy các truy vấn phương tiện khác nhau được áp dụng khi thay đổi kích thước trình duyệt trên máy tính để bàn của mình, bởi vì không giống như max-width, chỉ kích thước toàn màn hình thực tế của thiết bị mới được xem xét; không phải là kích thước hiện tại của cửa sổ trình duyệt.
Điều này tạo ra sự khác biệt lớn nếu bạn đang cố gắng tạo bố cục thích ứng vì trang web sẽ không phản hồi khi thay đổi kích thước trình duyệt. Ngoài ra, nếu bạn đang sử dụng max-device-widthcác truy vấn phương tiện mà bạn đang sử dụng để nhắm mục tiêu các thiết bị có màn hình nhỏ hơn sẽ không áp dụng cho máy tính để bàn ngay cả khi thay đổi kích thước cửa sổ trình duyệt xuống để phù hợp với kích thước màn hình nhỏ hơn đã nói.
Kể từ năm 2018, bản nháp đặc tả truy vấn phương tiện mới nhất đã thực sự không dùng device-widthtính năng phương tiện nữa, do đó cần tránh tính năng này.
Ngoài ra, bài viết này trên Google Developers rất không khuyến khích việc sử dụng max-device-width:
Nhà phát triển Google - Các nguyên tắc cơ bản về web - Truy vấn phương tiện CSS đáp ứng
Cũng có thể tạo các truy vấn dựa trên *-device-width; mặc dù thực hành này được khuyến khích mạnh mẽ .
Sự khác biệt là nhỏ nhưng rất quan trọng: min-widthdựa trên kích thước của cửa sổ trình duyệt, trong khi min-device-widthdựa trên kích thước của màn hình. Rất tiếc, một số trình duyệt, bao gồm cả trình duyệt Android cũ có thể không báo cáo chiều rộng thiết bị chính xác và thay vào đó báo cáo kích thước màn hình theo pixel thiết bị thay vì chiều rộng khung nhìn dự kiến.
Ngoài ra, việc sử dụng *-device-widthcó thể ngăn nội dung thích ứng trên máy tính để bàn hoặc các thiết bị khác cho phép thay đổi kích thước cửa sổ vì truy vấn dựa trên kích thước thiết bị thực chứ không phải kích thước của cửa sổ trình duyệt.
Đọc thêm: