@-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;}