响应式布局

一、搭建一个H5页面

1.我们需要在head中添加一个meta标签（在webstorm中输入meta:vp按下tab键会自动生成）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.viewport：视口
3.width=device-width：设置视口的宽度等于设备的宽度，如果不设置的话默认是980px;
4.user-scalable=no：禁止用户手动缩放;
5.initial-scale=1.0 maxmum-scale=1.0 min-mum-scale=1.0：设置屏幕最大最小默认缩放比例；

二、高清屏：二倍高清屏

1.苹果手机就是二倍高清屏，我们在手机上看到的100100px的图片，其实200200px的尺寸进行渲染，如果真是图片本身只有100*100px,最后呈现的就是被拉伸后变模糊的效果

• 苹果手机上需要的素材图片都需要比看到的尺寸大一倍才可以
  2.DPI适配思想
  我们在做页面的时候，最好每一张素材图片都准备两套或者三套，比如：
  logo.png 100100
  logo@2x.png 200200
  logo@3x.png 300*300
  ...
  3.媒体查询：@media
• 媒体设备：all所有设备 ，screen 所有屏幕设备PC+移动端， print打印机设备......
• 媒体条件：指定在什么样的条件下执行对应的样式

@media all (max-width:319px){    //宽度小于320px;
  .box{
    height:110px;
  }
}
@media all (max-width:359px) and (min-width:320px){    //宽度大于320px小于360px;
 .box{
    height:120px;
  }
}

三、响应式布局的解决方案

（一）流式布局法

• 设计师给我们的尺寸都是640 * 960 / 640 * 1136 / 750 * 1334
  1.流式布局法：容器或者盒子的宽度一般都不写固定值，而是使用百分比。
  2.其余的样式：字体、高度、margin、padding等等都按照设计稿上标注尺寸的一半来设置。
  3.对于有些屏幕尺寸下，我们设置的固定值看起来不是特别好看，使用@media进行微调整。

（二）rem响应式布局

• 我们做的H5页面只在移动端访问（rem不兼容低版本的浏览器）
  1.rem:当前页面中的元素的rem单位的样式值都是针对HTML元素的font-size的值进行动态计算
  2.步骤：
  (1)从UI拿到设计稿 640*1136
  (2)在样式中给HTML设定一个font-size的值，一般设置一个方便计算的值（浏览器最小的字体大小是12px）

 html{
            font-size: 100px;       //1rem = 100px;
        }

(3)写页面页样式：完全按照设计稿的尺寸来写，设计稿是多少你就写多少；但是我们再写样式之的时候，需要把得到的像素值除以100，计算出对应的rem值，我们设定的也都是rem的值。
(4)特殊：外层盒子的宽度我们一般还是不写固定值，沿用流式布局的思想，我们用百分比的方式布局
（5）根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size的值
设计稿：640 600300 font-size=100px;
手机：320 300150 font-size = 50px;
手机：375 （375/640）*100 ->font-size = 58.59375

    <script type="text/javascript">
        ~function () {
            var desW = 640,
                winW = document.documentElement.clientWidth,
                ratio = winW / desW;
            document.documentElement.style.fontSize = ratio * 100 + "px";
        }();
    </script>

（6）如果当前屏幕的宽度已经大于设计稿了，为了保证图片的良好展示，我们一般都不让再继续变大，以设计稿的宽度为最后宽度，剩余的部分留空白显示

    <script type="text/javascript">
        ~function () {
            var desW = 640,
                winW = document.documentElement.clientWidth,
                ratio = winW / desW;
            var oMain = document.getElementById('main');
            if(winW > desW){
                oMain.style.width = desW + 'px';
                oMain.style.margin = '0 auto';
                return;
            }
            document.documentElement.style.fontSize = ratio * 100 + "px";
        }();
    </script>