Cách sử dụng HTML <link> Thuộc tính phương tiện để tải CSS

HTML <link media> thuộc tính được sử dụng để chỉ định loại thiết bị mà nội dung (thường là tệp CSS) nên được tối ưu hóa cho. Bằng cách này, bạn có thể có các bảng định kiểu CSS khác nhau cho các mục đích khác nhau.

media thuộc tính nhận một số giá trị, với những giá trị phổ biến nhất là:

all :là mặc định, áp dụng cho tất cả các thiết bị loại phương tiện.
screen :dành cho màn hình máy tính, máy tính bảng, điện thoại thông minh - màn hình bất kỳ.
print :dành cho chế độ Xem trước bản in và các trang đã in.

Vì vậy, trong thực tế, bạn có thể có các biểu định kiểu CSS khác nhau được tối ưu hóa cho screen và print tương ứng.

Ví dụ:

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
   <link rel="stylesheet" type="text/css" href="screen.css" media="screen">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

Trong ví dụ trên:

<link> đầu tiên phần tử không chỉ định loại phương tiện, có nghĩa là phần tử đó sử dụng media="all" theo mặc định (áp dụng cho tất cả các loại phương tiện). Nó không hiển thị, nhưng nó ở đó.
<link> thứ hai phần tử sử dụng media="screen" , có nghĩa là biểu định kiểu này được tối ưu hóa cho màn hình.
<link> thứ ba phần tử sử dụng media="print" , có nghĩa là biểu định kiểu này được tối ưu hóa để in / xem trước.

Cách sử dụng HTML Thuộc tính phương tiện để tải CSS