Truy vấn phương tiện không có hiệu lực đối với kích thước của trình duyệt

Question

Tôi đang sử dụng truy vấn phương tiện để tạo phiên bản trang web trên thiết bị di động cho khách hàng. Khi tôi thay đổi kích thước trình duyệt, truy vấn phương tiện không có hiệu lực, tuy nhiên chúng có hiệu lực khi trang web được xem trên mỗi thiết bị - tôi chỉ tò mò là tại sao truy vấn phương tiện không có hiệu lực khi tôi đổi kích thước cửa sổ trình duyệt tức là Firefox.

Bất kỳ đầu vào nào được đánh giá cao.

Mã Tôi đang sử dụng:

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 720px) { 
    #container { 
     width: 100% !important; 
     } 
    } 

Answer 1

Bạn đã không gửi một ví dụ về mã, vì vậy tôi đoán: Nếu bạn đang sử dụng thuộc tính: max-thiết bị-width hoặc min-thiết bị-width , nó sẽ chỉ hoạt động trên các thiết bị có chiều rộng đó và sẽ bỏ qua việc thay đổi kích thước trình duyệt thủ công.

Bạn nên thay đổi thuộc tính thành: max-width/min-width.

@media screen and (min-width: 1024px){ 
    /* some CSS here */ 
} 

Kiểm tra ở đây:

Trong truyền thông CSS chênh lệch giữa chiều rộng và thiết bị-width có thể là một chút lộn xộn, vì vậy cho phép nói thêm về điều đó một chút. chiều rộng thiết bị đề cập đến chiều rộng của chính thiết bị, nói cách khác, độ phân giải màn hình là thiết bị.

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Answer 2

thay đổi mã của bạn để -

@media only screen 
and (min-width : 320px) 
and (max-width : 720px) { 
#container { 
    width: 100% !important; 
    } 
} 

luân phiên, bạn có thể giữ mã trước đây của bạn và kiểm tra tính chất đáp ứng của trang web của bạn trong máy tính cục bộ bởi Mozilla Thiết kế Responsive Xem tính năng - phím tắt ' Control + Shift + M '