响应式布局 媒体查询

响应式布局（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时

转载于:https://www.cnblogs.com/xutongbao/p/9924957.html