Hiểu các loại phương tiện CSS và truy vấn

Truy vấn và loại phương tiện CSS giúp người dùng xác định các kiểu nhất định phù hợp với loại chung của thiết bị (màn hình, bản in, v.v.) hoặc đặc điểm của thiết bị (độ phân giải màn hình, kích thước khung nhìn, v.v.)

Cú pháp

Sau đây là cú pháp cho các truy vấn phương tiện -

 @media not | chỉ loại trung gian và (biểu thức) {CSS-Code;} 

Ở đây, truy vấn phương tiện được áp dụng nếu -

• loại trung gian phù hợp với loại thiết bị mà tài liệu được hiển thị trên đó.
Toán tử
• not / only không được xác định thì truy vấn phương tiện áp dụng cho tất cả các kiểu phương tiện.
Toán tử
• not / only được chỉ định khi đó truy vấn phương tiện không / chỉ được áp dụng tương ứng cho một số loại phương tiện nhất định.

Mỗi người dùng có thể có các bảng định kiểu khác nhau tương ứng với một phương tiện khác nhau. Ví dụ:người dùng có thể có một biểu định kiểu khác cho phương tiện in và màn hình.

và,

Sau đây là các loại phương tiện được liệt kê trong CSS3 -

Sau đây là các phương pháp để tạo các biểu định kiểu phụ thuộc vào phương tiện -

• Sử dụng @media At-rules
• Sử dụng @import At-rules
• Sử dụng phần tử HTML với thuộc tính media

Ví dụ

Hãy xem một ví dụ cho truy vấn phương tiện CSS -

        
 
 
 
 
 
 
 
 
 
 
 
    
 Đầu ra 
 

 Điều này sẽ tạo ra kết quả sau - 
 

 Khi kích thước màn hình trên 850px - 
 

  
 

 Khi kích thước màn hình từ 550px đến 850px - 
 

  
 

 Khi kích thước màn hình dưới 550px - 
 

  
 
 Ví dụ 
 

 Hãy xem một ví dụ khác cho truy vấn phương tiện CSS:Tài liệu HTML - 
 
       

 Vivamus Goodso, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam goodso.Donec sem urna, seekisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. 
 
 Trong ultrices lectus nisi. Nulla varius ex ut exploreor congue viverra. Sed sodales haitula leo, vitae interdum elit Xe cộ bị hoại tử. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. 
 

 Suspendisse eget ligula et risus lobortis ornare id tại elit. Chiết áp Suspendisse. Vivamus pastyesque eleifend pastyesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus. 
   
 
 Tài liệu CSS (screen.css):p {color:navy; font-style:nghiêng; } .two {color:# c303c3; font-size:20px; } body {background-color:honeydew;} Tài liệu CSS (print.css):p {color:red; font-style:italic;}. hai {color:# 989898; font-size:40px; } 
 
 Đầu ra 
 

 Điều này sẽ tạo ra kết quả sau - 
 

 Khi tài liệu được hiển thị trong kiểu trung gian màn hình - 
 

  
 

 Khi tài liệu được hiển thị trong một loại trung gian in -