Có thể lồng truy vấn phương tiện trong các truy vấn phương tiện không?

Question

Điều này có thể không? Nó có vẻ như là một giải pháp gọn gàng với tôi, nhưng tôi không chắc liệu nó có hiệu quả hay không.

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

    /* Code for both portrait and landscape */ 

    @media (orientation:portrait) { 

     /* Code for just portrait */ 

    } 

    @media (orientation:landscape) { 

     /* Code for just landscape */ 

    } 

} 

Answer 1

Bạn có thể nest @media rules this way in CSS3 nhưng chưa được hầu hết các trình duyệt hỗ trợ. Xem this answer để biết chi tiết.

Bạn sẽ phải mở rộng đầy đủ và lặp lại các truy vấn phương tiện truyền thông cấp cao nhất cho các quy tắc bên trong cho nó hoạt động trên các trình duyệt (và tôi tưởng tượng bộ xử lý SCSS sẽ tạo ra một cái gì đó tương tự):

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) { 
    /* Code for both portrait and landscape */ 
} 

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: portrait) { 

    /* Code for just portrait */ 

} 

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: landscape) { 

    /* Code for just landscape */ 

} 

Answer 2

Nếu bạn muốn làm điều này một cách tốt nhất là sử dụng truy vấn phương tiện cấp cao trong thẻ liên kết và sau đó là các truy vấn khác bên trong trang tính được liên kết.

Trong thực tế, hầu hết mọi người xếp các quy tắc CSS của họ từ một bảng cơ sở bao gồm các công cụ phổ biến và sau đó thay đổi điều đó trong từng bộ quy tắc truyền thông.

Answer 3

Tôi nghĩ là không thể nhưng bạn có thể viết định dạng này Nếu bạn đang sử dụng bộ xử lý trước Sass css.

Ví dụ, bạn có thể sao chép mã này và dán vào https://www.sassmeister.com/ -Và xem đầu ra

Sass

@media only screen and (max-width: 767px) { 
    body{ 
    color:red; 
    } 
    @media (orientation:portrait) { 
     body{ 
     color:green; 
     } 
    } 
    @media (orientation:landscape) { 
     body{ 
     color:orange; 
     } 
    } 
} 

Output CSS

@media only screen and (max-width: 767px) { 
    body { 
    color: red; 
    } 
} 
@media only screen and (max-width: 767px) and (orientation: portrait) { 
    body { 
    color: green; 
    } 
} 
@media only screen and (max-width: 767px) and (orientation: landscape) { 
    body { 
    color: orange; 
    } 
}