Kết hợp các truy vấn phương tiện CSS

Question

Tôi muốn hiển thị cùng một tập hợp các kiểu CSS cho những người in trang (phương tiện = in) và những người đang duyệt trên điện thoại di động. Có cách nào tôi có thể kết hợp các truy vấn phương tiện CSS?

Something như

@media only print or @media only screen and (max-device-width: 480px) { 
    #container { 
    width: 480px; 
    } 
} 

Answer 1

Tách chúng bằng dấu phẩy:

@media only print, only screen and (max-device-width: 480px) 

See the spec, đặc biệt, ví dụ VI (nhấn mạnh thêm):

Một số truy vấn phương tiện truyền thông có thể được kết hợp trong một danh sách truy vấn phương tiện truyền thông. A danh sách truy vấn phương tiện được phân cách bằng dấu phẩy. Nếu một hoặc nhiều phương tiện truyền thông truy vấn trong danh sách được phân tách bằng dấu phẩy là đúng, toàn bộ danh sách là đúng, và ngược lại sai. Trong cú pháp truy vấn phương tiện, dấu phẩy biểu thị hợp lý HOẶC, trong khi từ khóa ‘và’ thể hiện một logic AND.

tôi nghi ngờ rằng thứ hai only là cần thiết, vì vậy bạn có thể làm:

@media only print, screen and (max-device-width: 480px) 

Answer 2

Từ https://developer.mozilla.org/en/CSS/Media_queries

Bạn có thể kết hợp phương tiện truyền thông nhiều truy vấn trong một danh sách bằng dấu phẩy; nếu bất kỳ truy vấn phương tiện nào trong danh sách là đúng, thì tờ áp dụng kiểu được liên kết được áp dụng. Điều này là tương đương với một hoạt động logic "hoặc".

Bạn chỉ cần xóa số thứ hai @media và thêm một số dấu ngoặc vuông.