Câu trả lời:
Đó là một truy vấn truyền thông. Nó ngăn CSS bên trong nó chạy trừ khi trình duyệt vượt qua các bài kiểm tra mà nó chứa.
Các thử nghiệm trong truy vấn phương tiện này là:
@media screen- Trình duyệt tự nhận mình đang ở trong danh mục màn hình trực tuyến. Đây đại khái nghĩa là trình duyệt xem xét bản thân theo lớp desktop - như trái ngược với ví dụ như một cũ của trình duyệt điện thoại di động (lưu ý rằng iPhone, và các trình duyệt điện thoại thông minh khác, làm tự nhận mình như là trong các loại màn hình), hoặc một đọc màn hình - và rằng nó được hiển thị trang trên màn hình, thay vì in nó.
max-width: 1024px- chiều rộng của cửa sổ trình duyệt (bao gồm thanh cuộn) là 1024 pixel trở xuống. ( CSS pixel, không phải pixel thiết bị .)
Thử nghiệm thứ hai cho thấy điều này nhằm hạn chế CSS cho iPad, iPhone và các thiết bị tương tự (vì một số trình duyệt cũ hơn không hỗ trợ max-widthtruy vấn phương tiện và rất nhiều trình duyệt máy tính để bàn được chạy rộng hơn 1024 pixel).
Tuy nhiên, nó cũng sẽ áp dụng cho các cửa sổ trình duyệt máy tính để bàn rộng dưới 1024 pixel, trong các trình duyệt hỗ trợ max-widthtruy vấn phương tiện.
Đây là thông số của Media Queries, nó khá dễ đọc:
Nó giới hạn các kiểu được xác định ở đó trên màn hình (ví dụ: không in hoặc một số phương tiện khác) và tiếp tục giới hạn phạm vi đối với các khung nhìn có chiều rộng 1024px trở xuống.
Nó nói: Khi trang hiển thị trên màn hình ở độ phân giải tối đa 1024 pixel, sau đó áp dụng quy tắc tuân theo.
Như bạn có thể đã biết trong thực tế, bạn có thể nhắm mục tiêu một số CSS đến một loại phương tiện có thể là một trong những thiết bị cầm tay, màn hình, máy in, v.v.
Có một cái nhìn ở đây để biết chi tiết ..
Trong trường hợp của tôi, tôi muốn tập trung logo của mình trên một trang web khi trình duyệt có 800pxhoặc ít hơn, sau đó tôi đã làm điều này bằng cách sử dụng @mediathẻ:
@media screen and (max-width: 800px) {
#logo {
float: none;
margin: 0;
text-align: center;
display: block;
width: auto;
}
}Nó làm việc cho tôi, hy vọng ai đó tìm thấy giải pháp này hữu ích. :) Để biết thêm thông tin xem điều này .
Đó là truy vấn truyền thông . Nó cho phép bạn chỉ áp dụng một phần quy tắc CSS cho các thiết bị cụ thể trên cấu hình cụ thể.
Điều đó có nghĩa là nếu kích thước màn hình là 1024 thì chỉ áp dụng dưới các quy tắc CSS.
Nếu điều kiện truy vấn phương tiện của bạn là đúng thì CSS của bạn với điều kiện đó sẽ hoạt động. Điều đó có nghĩa là CSS trong kích thước pixel điều kiện truy vấn phương tiện của bạn sẽ có hiệu lực hoặc nếu không thì điều kiện đó sẽ không có nghĩa là nếu chiều rộng của thiết bị lớn hơn 1024px so với CSS của bạn sẽ không hoạt động. Vì điều kiện truy vấn phương tiện của bạn sai.
max-width là giới hạn CSS tối đa của bạn cho đến chiều rộng đó.
Cũng đáng chú ý, bạn có thể sử dụng 'em' cũng như 'px' - blog và các trang web dựa trên văn bản làm điều đó bởi vì sau đó trình duyệt đưa ra quyết định bố cục liên quan nhiều hơn đến nội dung văn bản.
Trên Wordpress twentysixteen, tôi muốn khẩu hiệu của mình hiển thị trên điện thoại di động cũng như máy tính để bàn, vì vậy tôi đặt nó trong style.css chủ đề con của tôi
@media screen and (max-width:59em){
p.site-description {
display: block;
}
}Nó nhắm mục tiêu một số tính năng được chỉ định để thực thi một số mã khác ...
Ví dụ:
@media all and (max-width: 600px) {
.navigation {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
padding: 0;
}đoạn trích trên cho biết nếu thiết bị chạy chương trình này có màn hình có chiều rộng 600px hoặc nhỏ hơn 600px, trong trường hợp này, chương trình của chúng tôi phải thực hiện phần này.