Truy vấn phương tiện tối thiểu/tối đa không có ý nghĩa ngữ pháp

Question

Tôi đang tìm khái niệm về truy vấn phương tiện (chiều rộng tối thiểu/chiều rộng tối đa) một chút khó hiểu.

Đương nhiên nếu tôi là để thiết kế một truy vấn phương tiện truyền thông tôi muốn nói (trong pseudo-code) ....

if(screen.width < 420) 
{ 
    ApplyStyle(); 
} 

Khái niệm này nói về min và max không thực hiện bất kỳ cảm giác từ 'chiều rộng tối thiểu' của thứ gì đó giống như phần tử div là một câu lệnh không phải là một câu hỏi.

Tôi biết rằng sau đây là đúng khi màn hình của tôi đi dưới 420px ...

@media screen and (max-width:420px) { 


} 

tôi chỉ không biết tại sao, vì chiều rộng tối đa là một cái gì đó tôi nói với nó để có. Nếu tôi đã nói với nó để có một cái gì đó tại sao css kiểm tra nó? Chắc chắn nó đã biết rồi.

Tôi có thể thiếu ngữ pháp/ngữ cảnh ở đây. Ai đó có thể xin giải thích?

Answer 1

min-width trong các truy vấn phương tiện truyền thông không liên quan đến các min-width tài sản mà bạn thiết lập trên các yếu tố, đó là hai những thứ khác.

Trong truy vấn phương tiện min-width: X là true nếu chế độ xem có chiều rộng lớn hơn hoặc bằng X, hoạt động hiệu quả như screen.width >= X.Rõ ràng max-width sau đó sẽ là bằng screen.width <= X

Đối với tôi nó làm cho cảm giác hoàn hảo, nếu bạn đọc @media screen and (max-width:420px) như một màn hình có chiều rộng tối đa 420px, vì vậy bất cứ điều gì từ 0 đến 420px

Answer 2

Đây là một ví dụ đơn giản, hy vọng nó giúp ..

Giả sử chúng ta có một trang web với các truy vấn phương tiện truyền thông sau:

/* #1- Large desktop */ 
@media (min-width: 980px) { ... } 

/* #2- Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* #3- Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* #4- Landscape phones and down */ 
@media (max-width: 480px) { ... } 

Nếu kích thước màn hình của trình duyệt là 1200px, truy vấn số 1 sẽ được thỏa mãn vì chiều rộng tối thiểu của trình duyệt phải là 980px để truy vấn này được hiển thị.

phép nói rằng chúng ta thay đổi kích thước trình duyệt hiện nay, và mang nó tất cả các con đường xuống 250px .. truy vấn # 4 là hài lòng khi MAX là 480 ..

Dưới đây là bản dịch đơn giản của các truy vấn ..

@media (min-width: 980px) { ... } 

hiển thị nếu màn hình lớn hơn hoặc bằng 980px

@media (min-width: 768px) and (max-width: 979px) { ... } 

hiển thị nếu màn hình lớn hơn hoặc bằng 768px và nhỏ hơn hoặc bằng 978px

@media (max-width: 767px) { ... } 

Hiển thị nếu màn hình lớn hơn 480px và nhỏ hơn hoặc bằng 767px.

@media (max-width: 480px) { ... } 

hiển thị nếu màn hình nhỏ hơn hoặc bằng 480

Sử dụng các truy vấn này, bạn sẽ luôn có một kết quả, như một truy vấn luôn được thỏa mãn.

Answer 3

Sự rắc rối ở đây là có cả một truy vấn min-width thuộc tính CSS và phương tiện truyền thông có cùng tên:

@media (min-width: 420px) {...} /* This is read-only and is set to screen size */ 

.element { min-width: 420px; ...} /* This is setting a property of the selected element */