移动端的适配方案

移动端的适配方案

目录

• 移动端的适配方案
  • 百分比适配
  • viewport缩放适配
  • DPR缩放适配
  • rem适配
  • hotcss适配(使用dpr+rem,简单好用)
  • vw/vh适配(为适配而生，最优方案)

不同的尺寸的手机设备上，页面相对合理的展示（自适应）或者保持统一效果的等比缩放

百分比适配

根据父级计算百分比，需要配合其他布局使用

html,body{
width:100%;
.container{
width:100%;
div{
float:left;
width:25%;
}
}
}

viewport缩放适配

把所有机型的css像素设置成一致的,需要动态设置
缩放比公式: 缩放比 = css像素/375

缺陷:大设备图片失真,缩放比为小数容易出现误差等.

DPR缩放适配

把CSS像素缩放成与设备像素一致的尺寸

和viewport适配类似(反推)，根据dpr的值，把视口缩放到和物理像素，也就是把css像素的值设置成物理像素，让所有设备都变成物理像素和css像素1:1的结果

公式: dpr = 视口宽度/375

rem适配

rem的本质是计算元素占屏幕的百分比,单位rem需要设置到html标签上，代表屏幕每一列的宽度

设置rem的方式

• 使用javascript动态设置方法1

  <.script>
  (function(){
  var root = document.documentElement; //根元素html
  var width = window.clientWidth;//设备的宽度
  root.style.fontSize = width/20+'px'; //20是指列，可随意设置，但一定要方便计算

  })()
  </.script>
  ______________________________________________________________
  切图流程:
  1.先设置rem
  2.量出元素在设计稿中的尺寸
  3.使用这个尺寸除以DPR(得看你使用的哪个设备做基准)
  4.然后换算成rem，这个rem值就是这个元素的值了
  元素在设计稿的尺寸/DPR/列 就是最终结果

• 使用javascript动态设置rem方法二（推荐,重点推荐其扩展方法）

• 使用媒体查询设置rem（了解）

  @media screen and (min-width:xxxpx){
  html{
  font-size:xxxpx
  }
  }

根据屏幕设备的区间(min-width)来设置font-size的值
ios9不支持ES6,要么使用es5写法，要么后续使用bable处理

hotcss适配(使用dpr+rem,简单好用)

其使用了dpr的原理和rem结合
开源项目地址:✈️直达

优点：直接使用在设计图中量出来的尺寸，无需进行计算转化,如元素量出来宽是187.5px,那么在scss/less文件中写为:

width:px2rem(187.5);

vw/vh适配(为适配而生，最优方案)

vw、vh是一个css单位(Viewport's Width,Viewport's Height)
vmin 取vw\vh中最小的值
vmax 取vw\vh中最大的值
横竖屏切换时，它们会互换
vw/vh是将屏幕宽高都分成100份，1vw为屏幕1%的宽度，1vh为屏幕1%的高度
优点：为适配而生，逮着就用，不需要转化
存在兼容性问题: IOS>=8 Android>=4.4

方案一：全页面使用vw
方案二: 通过vw设置根节点字体，然后使用rem适配，无需使用js