H5页面响应适配

多适应布局

为了实现一套页面能够兼任多端适应友好显示，通常开发前都会根据项目需求来确认好页面的布局方式。

前端布局

前端常见的布局有 / 静态布局、流式布局 、弹性布局 、响应式布局 、自适应布局
一、静态布局
静态布局是传统的web布局设计。每块容器都是固定的大小和位置，超出的部分以滚动条滚动来实现滚动查阅。
常见的静态布局 ：最外层容器width固定居中，高度(auto)由子元素高度来撑开

二、流式布局
静态布局明显不适合手机移动端的适配，这就需要用到流式布局(百分比布局),每个容器都可以根据窗口的大小使用%来替代px做单位，但是移动端和PC端的之间尺度跨度过大,页面并不能正常显示，由于垂直方向像素恒定，可能水平很宽的屏幕会被拉伸变形严重，另外在高倍屏幕上1像素可能被多倍的物理像素显示，会变的非常粗。

三、弹性布局
给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式，设置为flex布局后， 子元素的float、clear和vertical-align属性将失效。

 flex-direction:  属性决定主轴的方向（即项目的排列方向）
 flex-wrap:  设置弹性盒子的子元素超出父容器时是否换行
 Order:  设置弹性盒子的子元素排列顺序
 Flex:  设置弹性盒子的子元素如何分配空间。
 justify-content:  项目在主轴（横轴）上的对齐方式。
 align-items：设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

四、响应式布局
响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容
响应式布局就是一套页面兼任多平台显示，元素的宽可以使用百分比来设计，viewport监听视口的变化，针对图片和文字的大小可以使用 rem单位来代替px;

rem 单位基于 html 元素的字体大小

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

使用媒体查询(media query)来设置每个视口根元素(html)的(font-size)大小

// js来监听视口的变化 来修改根元素(html)的大小
!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width = width < 320 ? 320 : width;
            width = width > 640 ? 640 : width;
            width && (docEle.style.fontSize = 100 * (width / 640) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

五、自适应布局
自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面
Bootstrap提供了一套响应式、移动设备优先的流式网格系统，系统会把视口的尺寸分割成12列
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

 <div class="row">
   <div class="col-sm-3">.col-sm-3</div>
   <div class="col-sm-3" >.col-sm-3</div>
   <div class="col-sm-3" >.col-sm-3</div>
   <div class="col-sm-3" >.col-sm-3</div>
 </div>

使用(Media query)媒体查询来设置不同视口下的显示

@media screen and (min-width:1200px)
@media screen and (min-width:992px)
@media screen and (min-width:768px)
@media screen and (min-width:480px)

也可以用

<link href="..." rel="stylesheet" media="screen and (max-device-width=480px)" />
//<!-- 针对每个视口去读取对应的css文件 -->