响应式布局

一、搭建一个H5页面

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

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
[email protected] 200200
[email protected] 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

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