移动端H5页面适配flexible.js是高清适配的一种方法，它通过javascript根据不同设备的dpr值和设备宽度

适配

页面适配

一是布局适配
可以使pc、手机、平板共用一份代码，实现方法有css媒体查询、
cass弹性盒模型、css grid布局，以及响应式布局等。
二是高清适配，面对的是移动开发中设备不同分辨率和不同尺寸，最大限度还原设计效果

flexible

移动端布局，为了适配各种大屏手机，目前最好用的方案莫过于使用相对单位rem flexible.js是高清适配的一种方法，它通过javascript根据不同设备的dpr值和设备宽度为html动态设置font-size，其他元素使用rem做单位。

核心1 dpr(设备像素比) = 物理像素(屏幕像素) / 设备独立像素（css像素）

核心2rem

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

根元素html的font-size标准值 = document.documentElement.clientWidth * dpr / n 这里的n可自由设定，flexible将n定为10，从而使元素大小适配不同手机屏幕尺寸和dpr

1.单位换算

我们从设计稿得到的尺寸是px为单位的，如果要换算成rem作单位需要依赖编译器插件，而且会出现小数的情况。所以可以自定义flexible.js文件，将计算font-size标准值的n定为3.75，这样可以使得在高清屏中1rem = 100px, 这样只需心算一下就能换算单位了。

2.自动编译处理好我们 px2rem-loader : webpack加载器，将px换算rem

项目总结

1. retina下图片高清问题

因为位图像素一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元不同的dpr下，加载不同的尺寸的图片需要一个图片服务器，通过url获取参数，然后可以控制图片质量，也可以将图片裁剪成不同的尺寸

2.retina下，border: 1px问题

方案

.border-top-1px,
.border-top-1px-sales,
.border-right-1px,
.border-bottom-1px,
.border-bottom-1px-sales,
.border-left-1px {
  position: relative;
  &::before,
  &::after {
      content: "";
      display: block;
      position: absolute;
      transform-origin: 0 0;
  }
}

.border-top-1px {
  &::before {
      border-top: 1PX solid #ddd;
      left: 0;
      top: 0;
      width: 100%;
      transform-origin: 0 top;
  }
}



.border-right-1px {
  &::after {
      border-right: 1PX solid #ddd;
      top: 0;
      right: 0;
      height: 100%;
      transform-origin: right 0;
  }
}



.border-bottom-1px {
  &::after {
      border-bottom: 1PX solid #ddd;
      left: 0;
      bottom: 0;
      width: 100%;
      transform-origin: 0 bottom;
  }
}

.border-top-1px-sales {
  &::after {
      border-bottom: 1PX solid #f1f1f1;
      left: 0;
      bottom: 0;
      width: 100%;
      transform-origin: 0 bottom;
  }
}

.border-bottom-1px-sales {
  &::after {
      border-bottom: 1PX solid #f1f1f1;
      left: 0;
      bottom: 0;
      width: 100%;
      transform-origin: 0 bottom;
  }
}


.border-left-1px {
  &::before {
      border-left: 1PX solid #ddd;
      top: 0;
      left: 0;
      height: 100%;
      transform-origin: left 0;
  }
}
.all-border {
  position: relative;
}
.all-border::after {
  content: '     ';
  position: absolute;
  top: 0;
  left: 0;
  border: 1PX solid #ddd;
  border-radius: 2px;
  box-sizing: border-box;
  transform-origin: 0 0;
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-resolution: 2dppx) {
  .border-top-1px {
      &::before {
          width: 200%;
          transform: scale(.5) translateZ(0);
      }
  }

  .border-right-1px {
      &::after {
          height: 200%;
          transform: scale(.5) translateZ(0);
      }
  }

  .border-bottom-1px {
      &::after {
          width: 200%;
          transform: scale(.5) translateZ(0);
      }
  }

  .border-left-1px {
      &::before {
          height: 200%;
          transform: scale(.5) translateZ(0);
      }
  }
  .all-border {
      &::after {
          width: 200%;
          height: 200%;
          transform: scale(.5) translateZ(0);
      }
  }
}
@media (min-resolution: 3dppx) {
  .border-top-1px {
      &::before {
          width: 300%;
          transform: scale(.333) translateZ(0);
      }
  }

  .border-right-1px {
      &::after {
          height: 300%;
          transform: scale(.333) translateZ(0);
      }
  }

  .border-bottom-1px {
      &::after {
          width: 300%;
          transform: scale(.333) translateZ(0);
      }
  }

  .border-left-1px {
      &::before {
          height: 300%;
          transform: scale(.333) translateZ(0);
      }
  }
  .all-border {
      &::after {
          width: 300%;
          height: 300%;
          transform: scale(.333) translateZ(0);
      }
  }
}

3.我的项目我想归纳这个传统的适配方案名称 h5源适配方案

设计师的v1要求给出三倍设计图要求所有机型显示比例完全一样我们的方案修改flexble 源码

 function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          width = 540 * dpr;
      }
      var rem = width * 100 / 1242;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }

  win.addEventListener('resize', function() {
      clearTimeout(tid);
      tid = setTime

代码里直接写设计图准备尺寸在plugin 通过px2scale 设置缩小3倍

这样的效果是什么满足了比例统一 but=》

   1.设计师验收时 并不能很好得到理想物理尺寸 fe也很痛苦
   2.大屏很大 小屏很小
   3.运行在app页面 和客户端的适配不同 同样模块大小不一 体验很差

上边完全是历史问题history（恨死他啦）

设计师的v2要求

设计师需要在不同设备看到效果是一样的包括文字和布局结构不同尺寸不要求比例100% 页面结构即可就行

设计师设计理念需要我们把移动端以栅格化的形式开发，他们也是以栅格化的程式设计

我理解栅格化理念就是

width 是等分的概念去百分比的组装 height是多少就写多少

viewport 是浏览器引擎提供view入口默认是原始尺寸并不是和默认的手机物理尺寸相等我们需要理想viewport 比例让所有手机viewport比例都和手机物理宽度相等这样我们才能做适配所以所有h5上都有这段code

<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no,viewport-fit=cover">

viewport 理想化初始化比例渲染比例是设备款
栅格化模式是多少写多少

总结下

横向上适配分为layout适配和高清屏幕的适配纵向分为三种方案

媒体查询做自适应布局（看项目吧）
flexible方案纯h5 （还可以）
h5源方案（推荐）

移动端H5页面适配