| 适配

移动端适配

像素相关

  • 物理像素
  • 设备独立像素
  • 设备像素比(dpr)
物理像素(设备像素)

它是显示器最小物理显示单位,每个物理像素由颜色值和亮度组成,由屏幕参数决定.

设备独立像素(CSS像素)

它就是我们用的css像素,是抽象单位.

设备像素比(dpr)

物理像素和设备独立像素的比例.常说的一倍屏,二倍屏…就是dpr=1,2..

需要注意的是dpr=2(dpr=3)并不是2个(3个)物理像素表示1个设备独立像素,而是2*2个(3*3个)表示1个设备独立像素


视口

  • 可视视口
  • 布局视口
  • 理想视口
可视视口(visual viewport)

指屏幕宽高,通过window. innerWidth/Height获取

布局视口(layout viewport)

指DOM宽高,通过document. documentElement. clientWidth/Height获取

理想视口(ideal viewport)

指使布局视口就是可视视口,就是理想视口;
通过meta标签实现

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

通过name=”viewport”可以设置一些显示相关参数
width=device-width: 就是设置理想视口,宽度为设备宽度
user-scalable=no: 禁止缩放
initial-scale=1.0: 初始缩放值
maximum-scale=1.0, minimum-scale=1.0: 允许用户缩放的最大/最小值

适配方案

  • 百分比
  • rem
  • rem + vw
  • 媒体查询响应式
百分比

原理: 使用%定义宽,高度固定px,用max-width/min-width控制尺寸范围
优缺点:

  • 原理简单,不存在兼容问题
  • 屏幕尺寸跨度太大可能出现拉伸变形,字体不能自适应
rem
  • rem是什么?
    • 是相对于根元素字体大小的单位,是一个相对单位
    • 1rem = Xpx (html-fontSize)
    • 当元素设置2rem宽 = 2*X (px)
    • 因为是相对跟元素,所以确定根元素fontSize大小和实际元素(某div)rem数值即可根据上式自动计算
  • 根元素fontsize和实际元素(某div)rem数值怎么确定?
    • 理论上html-fontsize可随意设置, 但这样将是个没有规律没有意义的设置.需要有尺寸参照,使设备宽度和设计图宽度对应,才有意义
    • 元素的rem数值一定是在设计图量取的,但现在量取的值(px)还没法转成rem,也是需要有尺寸参照才行
  • 怎么确定尺寸参照,使html-fontsize有意义,让量取的px正确的转成所需的rem?
    • 首先看影响尺寸参照的两个要素: 设备尺寸和设计图尺寸
    • 设备宽:设计图宽 = 设备上应该显示的宽x:量取的宽
      • 以320设备和750设计图为例, 320:750 = x:75px 得出x= 32px
    • 上述比例关系是成立的,直接转px很简单(375设备和750设计稿是直接除以2的)
    • 把这个比例设成html-fontsize就和rem挂钩了,因为比例关系设置成立html-fontsize了,因此只要保障设计图尺寸和分母的比例即可
      • 320:750 750即设计图尺寸,量取75px直接转换成75rem即可;75rem * (320/750)
      • 320:20 设计图实际的750, 比例中是20, 量取的75px需要75/(750/20); 2rem * (320/20)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//这段代码放在head标签里面
(function () {
    var html = document.documentElement;
 
    function onWindowResize() {
        html.style.fontSize = 100 * html.getBoundingClientRect().width / 750 + 'px';
    }
 
    window.addEventListener('resize', onWindowResize);
    onWindowResize();
})();

/* 
750的设计图,将比例前乘了100,所以,量取200px=>2rem
*/
rem + vw

vw,vh等于视口宽高的1%;100vw+100vh = 视口宽高,是个比例单位
上面讲rem适配是联系设备和设计图之间的关系,实现rem转换
那么用vw即可实现联系又省去了复杂的转换.
以750设计图,320设备为例

  • 设计图上: 750px = 100vw => 1px = 0.13333333333333333vw
  • 在设备上: 将rem和vw关联,vw和设计图关联,设html-fontsize = 0.13333333333333333vw
  • 量取尺寸75px: 75rem * 0.13333333333333333vw = 10vw 即 320 * 10vw = 32px
  • 通常为例方便计算设html-fontsize = 13.333333333333333vw;量取尺寸/100使用即可
媒体查询响应式

主要实现是通过 媒体查询，通过给不同分辨率的设备编写不同的样式实现响应式布局，用于解决不同设备不同分辨率之间兼容问题，一般是指PC、平板、手机设备之间较大的分辨率差异。实现上不局限于具体的方案，通常结合了 流式布局 + 弹性布局 方案。

1
2
3
4
5
6
@media only screen and (min-width: 375px){
    样式1
}
@media only screen and (min-width: 750){
    样式2
}

常见问题

  • 1px问题
  • 图片问题(几倍图)

参考:

移动端适配
移动端Web页面适配方案（整理版）
不要再问我移动适配的问题了
rem适配方案

ESC