响应式布局（responsive web design）指的是在网页开发过程中针对不同设备

开发一套网站，然后根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕

定向等）自适应地显示不同布局。响应式布局的核心是媒体查询。媒体查询

（media query）是获取用户行为和设备环境、然后提供相应的css规则的过程

的简称。媒体查询让css可以更精确作用于不同的媒体类型和同一媒体的不同条件。

CSS 语法

@media mediatype and|not|only (media feature) {    CSS-Code;}

你也可以针对不同的媒体使用不同 stylesheets :

1.目录结构

2.index.html

          
          
        
        
          
                
当浏览器窗口的宽度小于 500 像素时，背景颜色会有变化。
  
    
     徐同保
    
  
    
     徐同保
    
      

3.style.css

.mystyle2 {    background: red !important;}

4.运行结果

大于500px时

小于500px时