流式布局解决方案

在真实项目中设计师给我们一般是：640960 6401136 750*1334
响应式布局的解决方案：
1>流式布局法
容器或者是盒子一般都不写固定值，而是使用百分比（相对于视口区域的百分比）
其余的样式：字体、高度、margin、padding等都按照设计稿上标注尺寸的一半来设置
对于有些屏幕尺寸下，我们设置的固定值看起来不是特别的好看，需要用@media微调
特殊情况是设计稿是640px，在iphone6 6p会虚化,我们需要的图片是1280

         @media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px){
             .box{
                 background: url('big.jpg').....;
              }
         }
         /*针对于平板或安卓机*/
         @media all and (min-width: 640px){
             .box{
                 background: url('big.jpg').....;
             }
         }

苹果手机的尺寸：5s是320px 6是375px 6plus是414宽度
常用的安卓尺寸：320、360、480、540、640、720.....

6plus是三倍高清屏屏幕的尺寸，一般设计师给的图片是1280px