Quy tắc @media trong CSS

Quy tắc CSS @media được sử dụng để chỉ định các kiểu khác nhau cho các loại phương tiện khác nhau (chẳng hạn như in, màn hình, tất cả, v.v.) trong một biểu định kiểu duy nhất. Theo sau nó là danh sách các loại phương tiện được phân tách bằng dấu phẩy và khối khai báo CSS chứa các quy tắc kiểu cho phương tiện đích.

Cú pháp

Sau đây là cú pháp -

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

Ví dụ

Hãy xem ví dụ về quy tắc CSS @media -

        
 
 
 
 
 
 
 
 
 
 
 
    
 Đầ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 quy tắc CSS @media - 
 
       

 Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. 
   
 
 Đầ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 500px - 
 

  
 

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