响应式布局、手机设备站

@-ms-viewport,
@viewport {
width: device-width;
}

用于适配不同屏幕，因为在IE10的捕捉模式（snap mode）下，Windows 8 Metro模式下的一个特性，可以将浏览器拖至屏幕的左端或右端，同时使用两个窗口。奇怪的是， 要解决这个问题，开发者就要使用上面介绍的device-width方法，或者在media query里面使用@viewport规则。

与minimum-scale, maximum-scale对应的描述符是max-zoom, min-zoom。zoom相当于initial-sacale，类似：

@viewport {
   width: device-width; 
   max-zoom: 3; 
   min-zoom: 0.50; 
}

其实就是<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>的CSS化

首先应用固定布局转换成流体布局，以适应不同分辨率下的比例，更好的适应不同分辨率用户使用。第一点：布局采用的是流动布局，其基本原理是使用相对尺寸、结合百分比和em，用简单的分割以找到相对应的像素宽度。第二字体采用的是em，采用这两个的好处就是，我们布局随浏览器分辨率改变时其大小也会相应做出调整；然后结合CSS Media Query在不同的媒体类型和媒体特性下构造不同的样式，从而达到在不同分辨率下显示不同风格的页面效果。

/*屏幕小于600px的PC浏览器, iPhone和mobiles时的样式*/
                @media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {
                        //css 代码写在这里
                    }
                    /*屏幕大于或等于900px是时的布局样式*/
                @media screen and (min-width: 920px) {
                    //css 代码写在这里
                    }

                    /*屏幕大于或等于1350px的布局样式*/
                @media screen and (min-width: 1350px) {
                //css 代码写在这里
                    ｝

                    /*屏幕大于或等于1500px时的布局样式*/
                @media screen and (min-width: 1500px) {
                    //css 代码写在这里
                    }

                /*iPhone*/
                @media only screen and (max-device-width: 480px) {
                    //css 代码写在这里
                }

                /*iPad */
                @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
                        //css 代码写在这里
                    }

 其中

img{width:100%;height:auto;}