h5移动端布局适配

百分比适配

• 优点：简单易理解
• 缺点：要计算子父元素的大小比例，成本太高
  • 在做一些弹窗时不容易确定父子元素关系
  • 在小元素中防止隐藏的元素时会有超过100%的情况
    

viewport缩放适配

• viewport缩放适配 把所有机型的设备独立像素设置成一致的
  1. viewport需要通过js动态的设置（不能直接把device的值设置成数值）
  2. 通过设置比例（初始比例以及缩放比例），把宽度缩放成一致的
     

DPR适配

DPR缩放适配 根据dpr的值，把视口进行缩放，缩放到物理像素，也就是把css像素的值设置成物理像素，让所有的设备都变成一个css像素对应一个设备像素

rem适配

概念

• em ：

  • 作为font-size的单位时，其代表父元素的字体大小，作为其他属性单位时，代表自身字体大小

               ** font-size:20px      1em=20px**
    

  • 存在的问题：

    1. chrom下有最小字体限制，必需为12px，所以这个值不能小于12
    2. 如果两个一样的元素，但是里面字体不一样，那就不能统一设置了。或者元素字体变化了，就又要统一设置一遍
• rem ： CSS3新增的一个相对单位，是相对于根元素字体大小

** html{font-size:20px} 2rem=40px**

rem适配的原理

把所有的设备都分成相同的若干份，再计算元素宽度所占的份数

设计稿中元素大小为30px
把手机屏幕分成100份
在屏幕宽度为100的手机上	在屏幕宽度为200的手机上	在屏幕宽度为300的手机上
一份大小为1px	一份大小为2px	一份大小为3px
设置font-size为1px	设置font-size为2px	设置font-size为3px
设计稿上30px的元素	设计稿上30px的元素	设计稿上30px的元素
1rem = 1px	1rem = 2px	1rem = 3px
元素大小为30px	元素大小为60px	元素大小为90px
通过rem只改变根节点的子体大小就可以实现在不同屏幕的适配 在不同大小的屏幕中显示的大小不同

设置根节点字体大小

js方式

(function(doc, win, designWidth) {
  const html = doc.documentElement;
  //const dpr = win.devicePixelRatio;	//dpr

  const refreshRem = () => {
    const clientWidth = html.clientWidth;
    if (clientWidth >= designWidth) { //给宽度一个最大值，如果设备的宽度已经超过设计稿的尺寸了，统一按一个值去算（传的第三个参数）
      html.style.fontSize = '100px';
    } else {
 			// 设计搞的单位 = css像素 * dpr  这种写法可以在程序上解决换算要除dpr的步骤
      // rem 的值直接往前挪2位小数即可
      html.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
    }
  };

  //dom加载完的一个事件 执行在onload前，此时还没有合并html tree和css tree
  doc.addEventListener('DOMContentLoaded', refreshRem);
})(document, window, 750);//750是设计图的宽度

css媒体查询方式 ，手动判断每个区间的font-size值

@media screen and (min-width: 400px) {
    html {
        font-size:26.67px
    }

    body {
        font-size: 14px
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size:27.6px
    }

    body {
        font-size: 14px
    }
}

@media screen and (min-width: 424px) {
    html {
        font-size:28.27px
    }

    body {
        font-size: 14px
    }
}

hotcss适配

设计稿像素通过函数处理https://github.com/amfe/lib-flexible

vw，vh适配 （推荐）

• vw Viewport’s width的简写，1vw等于视口宽度的1%

•   vh      Viewport's height的简写，1vh等于视口高度的1%
  

•   vmin    取vw和vh中最小的值
  

•   vmax    取vw和vh中最大的值
  

• 根据求得根节点的字体大小，换算成vw