H5适配布局详细介绍

1、为什么需要H5适配布局？
1）为了适应各种移动端设备/手机，显示相应的布局效果
2）可以适应各个移动端设备，并且在各种分辨率下等比例缩放以及网页可以铺满整个屏幕

2、H5相关性概念知识
屏幕尺寸
1）指屏幕的对角线的长度，单位是英寸。
2）1英寸 = 2.54厘米。
屏幕分辨率
1）在横纵向上的像素点数，单位是px，1px=1个像素点（这里的1像素指的是物理设备的1个像素点）
2）例如一个手机的分辨率是1334x750像素。即（纵向像素*横向像素=一个手机的分辨率）
屏幕像素密度/像素密度/屏幕密度
1）屏幕上的每英寸可以显示的像素点的数量，单位是ppi
2）屏幕像素密度与屏幕分辨率有关
设备像素/物理像素
1）iPhone 6的分辨率是1334x750像素，代表设备（屏幕）有1334x750个显示呈像的点，一个点（1px，小方格）为一个物理像素
2）它是屏幕能显示的最小粒度
3）每个像素可以显示颜色和亮度
4）任何设备（屏幕）的物理像素的数量都在生产后都是固定的

CSS像素
CSS像素是为Web开发者根据设计图表示Web页面上的内容大小的抽象单位，【主要】使用在浏览器上

设备独立像素
1）又称为设备密度无关像素
2）对于显示对应的大小这种依赖于屏幕特性和用户缩放程度的复杂计算是由浏览器来操作

位图像素
一个位图像素是栅格图像（png，jpg，gif等）最小的数据单元，至少1个位图像素对应1个物理像素，图片才能得到完美清晰的展示

像素比
设备物理像素和设备独立像素的比例，表示以多个像素去显示1px的大小
设备像素比=物理像素/独立像素

布局视口
1)PC端上，布局视口等于浏览器窗口的宽度
2)移动端上，布局视口一般980px(document,documentElement.clientWidth)

视觉视口（visual viewport）
眼睛所看到的窗口：即当前显示在屏幕上的部分页面。用户会滚动页面来改变可见部分，或者缩放浏览器来改变视觉视口的尺寸
innerWidth // 视觉视口，如果设置滚动条则包括滚动条
outerWidth // 包括浏览器的镶边区域
screen.width // 屏幕宽度

适配问题
1）设计图一般是750px宽
2）meta最初Apple的一个html扩展标签，但被许多浏览器复用，意义是设置layoutviewport的宽度
3）可视区的窗口需要适配各种设备
4）根据不同场景选择合适的适配方案

3、移动端常用适配方案
1）适配方案
媒体查询
b）固定高度，宽度百分比适配–布局非常均匀，适合百分比布局
c）固定宽度，改变缩放比例适配–什么情况都可以
rem适配
a）PC端 和 移动端 分开开发
b）响应式布局可以适应PC端和移动端，但是麻烦，需要写很多套css代

Flex布局

2）单位
a）em根据元素自身的字体大小计算 元素自身 16px 1em=16px，继承父级的这字体大小
b）rem r：root根节点(html) 根据html的字体大小计算其他元素尺寸,rem不仅可以设置字体大小，还可以设置宽高大小
3）宽高度
固定高度，宽度百分比适配%/固定宽度，改变缩放比例适配/vw视口宽高度

//需求：根据固定的ui设计稿动态的改变宽度 
        //需要监听，根据浏览器的大小来动态的改变
        window.addEventListener("resize",layout);
        function layout(){
            let width=window.screen.width;
            let fixedWidth=750;//一般设计图是750的宽度
            let meta=document.createElement("meta");//创建一个meta标签
            let scale=width/fixWidth;//计算缩放比例
            meta.setAttribute("name","viewport")//设置meta属性
            meta.setAttribute("content","width=" + 750 + ",initial-scale=" +scale + ",maximum-sccale=" + scale + ",user-scalable=no");
            document.head.appendChild(meta);//appendChild是激活创建的元素createElement
        }layout();//调用函数

4、适配方案案例
1）CSS的rem适配

 *{
            padding: 0;
            margin: 0;
  }
 html{
            font-size: 30px;
  }
  @media screen and (min-width: 600px) {
            div{
                width: 100vw;
                height: 100vh;
                margin:auto;
                color:sandybrown;
                font-size:40px;
                background-color: rgb(23, 240, 15);
            }
        }
 @media screen and (min-width:400px) and (max-width: 600px) {
            div{
                width: 100vw;
                height: 100vh;
                margin:auto;
                font-size: 20px;
                color:red;
                background-color: pink;
            }
        }
@media screen and (min-width:300px) and (max-width: 400px) {
            div p{
                width: 60vw;
                height: 60vh;
                font-size: 1rem;
                color:pink;
                background-color:blueviolet;
            }
        }
 @media screen and (min-width:100px) and (max-width: 300px) {
            div p{
                width: 30vw;
                height: 30vh;
                font-size: .5rem;
                
                color:blue;
                background-color:skyblue;
            }
        }

2）JS的rem适配
使用js让浏览器自动计算rem的字体大小

 body{
            margin:0;
            padding:0;
        }
        #box{
            width: 2rem;
            height: calc(1rem/5);
            /* calc用于动态计算长度值，任何长度值都可以使用calc()函数进行计算 */
            /* calc()函数支持“+、-、*、/”的运算*/
            background-color: salmon;
        }

 //监听
       window.addEventListener('resize',remChange);
        function remChange(){
             //得到html元素
            let html=document.querySelector("html");
             //拿到html的宽度
             let width=html.getBoundingClientRect().width;
             //getBoundingClientRect()用于获取页面中某个元素的左右上下分别想对于浏览器视窗的位置
            //getBoundingClientRect().width获得元素的内容宽度
            // console.log(width);
            //直接设置fontsize字体的大小
            html.style.fontSize=width/10+'px';
        }remChange();//写了函数需要调用