[CSS3] Media Query & Responsive Design

(1) Media Query

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

 @media screen and (max-width: 600px) {
    选择器 {
      属性：属性值；
    }
  }

Reference: 媒介查询

---

(2) Responsive Design

  根据不同的devices来设计及适应


1. grid 流体网格
2. 弹性图片
   img{max-width:100%}
3. media query
4. 屏幕分辨率
5. 主要断点
   设备宽度的临界点
   min-width max-width 就是断点
6. <meta name="viewpoint" content=" "> 
    重置的目的为了说明 视图的宽度是设备的宽度