Truy vấn phương tiện lồng nhau

Question

Theo mặc định, tôi muốn cho phần tử cơ thể của tôi có đường viền màu xanh lá cây. Trên thiết bị hỗ trợ màn hình hiển thị võng mạc, trước tiên tôi muốn kiểm tra kích thước. Trên một chiếc ipad, tôi muốn cung cấp cho cơ thể của tôi một đường viền màu đỏ và trên một chiếc iphone tôi muốn cho nó một đường viền màu xanh. Nhưng các truy vấn truyền thông lồng nhau như vậy không hoạt động:

body { border: 1px solid green; } 

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    @media (max-width: 768px) and (min-width: 320px) { 
     body { border: 1px solid red; } 
    } 
    @media (max-width: 320px) { 
     body { border: 1px solid blue; } 
    } 
} 

Answer 1

No. Bạn cần sử dụng toán tử and và viết hai truy vấn. Tuy nhiên, bạn có thể làm điều này trong SCSS, nó sẽ biên dịch thành CSS, nhưng nó sẽ kết hợp chúng bằng cách mở chúng ra và sử dụng toán tử and.

Đây là một vấn đề phổ biến, và một khi tôi lần đầu tiên viết LESS hoặc SCSS, tôi không bao giờ muốn quay trở lại để viết điều này dài tay.

dài trao CSS:

@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) and (min-width: 320px), 
        (min-resolution: 192dpi) and (max-width: 768px) and (min-width: 320px) { 
    body { 
    border: 1px solid red; 
    } 
} 
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px), 
        (min-resolution: 192dpi) and (max-width: 320px) { 
    body { 
    border: 1px solid blue; 
    } 
} 

truy vấn lồng nhau có thể làm việc, nhưng hỗ trợ nhau trên các trình duyệt.