Các tệp CSS khác nhau cho các truy vấn Phương tiện khác nhau

Question

Có cách nào để có tệp HTML sử dụng biểu định kiểu khác dựa trên thuộc tính phương tiện không? Tôi biết rằng phương thức link có loại phương tiện nhưng tất cả các tham chiếu tôi tìm chỉ cho biết loại phương tiện chứ không phải truy vấn mở rộng. Tôi cũng không chắc chắn về cách nó sẽ đảm bảo chỉ có một được chọn, và cái nào.

Về cơ bản trong tập tin CSS hiện tại của tôi, tôi có một phần phương tiện truyền thông như thế này (giản chỉ để tham khảo):

@media (min-device-pixel-ratio: 1.5) { 
    specific-media-rules 
} 

Những gì tôi muốn là thay vì có phần này và một phần rất giống nhau cho khác phương tiện truyền thông là để phục vụ hai tập tin riêng biệt.

Answer 1

Có. Một ví dụ có thể là như sau: bạn muốn sử dụng một file CSS khác nhau tùy thuộc vào độ rộng màn hình (một cho điện thoại, người ta cho máy tính bảng nhỏ) và bạn có thể làm như vậy giống như ví dụ:

<link rel="stylesheet" media='screen and (min-width: 140px) and (max-width: 380px)' href="phone.css"/> 
<link rel="stylesheet" media='screen and (min-width: 381px) and (max-width: 700px)' href="tablet.css"/> 

Lưu ý tuy nhiên, bạn cần đảm bảo rằng các yêu cầu cho từng tờ định kiểu sẽ không giống nhau, như thể chúng (nếu cả hai bảng kiểu trên có cùng độ rộng tối thiểu và chiều rộng tối đa) cả hai đều sẽ được áp dụng.