响应式布局流式布局

响应式布局：根据不同的尺寸适配

viewport

width=device-width 设置视口的宽度等于设备的宽度，如果不设置的话，默认视口的宽度是980px

通俗理解：我们这个操作其实展示当前这个页面一共有多宽（浏览器的宽度）

高清屏幕：苹果手机是二倍高清屏幕，也就是我们在手机上看到的那张100_100的图片，其实苹果手机是按照200_200的尺寸进行渲染的，

如果真实图片是100100，最后呈现出来的就是被拉伸后边模糊的效果

苹果手机上需要的素材图片都需要比看到的尺寸大一倍才可以，安卓不用

DPI适配思想:我们在做页面的时候，最好每一张图片都准备两套或三套比如：

_logo.png 100_100

logo@2x.png

logo@3x.png

 媒体查询@media:有两部分
 媒体设备：all(所有设备) screen（所有屏幕设备pc+移动） print(打印机设备)...
 媒体条件: 指定在什么样的条件下执行对应的样式
 @media all and(max-width:319px){
     //当前的宽度是小于320像素的  
 }
 @media all and (min-width:320px) and (max-width:359px){
      //大于等于320小于360
 }

响应式布局的解决方案：流式布局法

1、容器或者盒子的宽度一般都不写固定的值，而是使用百分比（相对于视口区域的百分比）

其余的样式：字体、高度、margin、padding都按照设计稿上标注尺寸的一半来设置

对于有些屏幕尺寸下我们设置的固定值看起来不是特别好看的话我们使用@media微调

在真实项目中，设计师给我们的设计稿一般是 640_960 640_1136 750*1334

常用的手机尺寸：5s一下都是320px 6是375px 6plus是414px的宽度

常用的安卓手机尺寸：320、360、480、540、640、720

特殊情况，设计师的设计稿是640px 我们的素材图也是640px的，这样的话在iphone6/iphone6 plus展示的时候，图片不够大，这种情况下我们需要单独找设计师要一张更大的图

      @media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px){
         .box{
             background: url("aaaa.jpg");
         }
      }
      @media all and (min-width: 640px){
          .box{
              background: url("aaaa.jpg");
          }
      }

开始项目之前的准备

http://www.jianshu.com/p/b7836e8b88ec

http://www.jianshu.com/p/be1f77040606

移动端样式重置http://www.jianshu.com/p/92766697b564