CSS3中的响应式布局 @media查询

     多媒体查询：取代了查找设备的类型，CSS3根据设置自适应显示。

    *viewport（视窗）的宽度与高度

   *设备的宽度与高度

   *朝向（智能手机横屏、竖屏）

   *分辨率

  目前很多针对苹果手机、android手机、平板等设备都会使用到多媒体查询。

<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,

user-scalable=0,width=device-width,initial-scale=1.0"/>

如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}