Web 端屏幕适配方案

2022-08-17 09:42:19

基础知识

像素相关

1、像素 ：像素是屏幕显示最小的单位。

2、设备像素 ：设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。 iPhone5 的物理像素是 640 X 1136

3、逻辑像素（logical pixel）：独立于设备的用于逻辑上衡量像素的单位。CSS 像素就是逻辑像素，CSS 像素是 Web 编程的概念。

4、设备独立像素（density-independent pixel）：简称 dip ，单位 dp ，独立于设备的用于逻辑上衡量像素的单位。且逻辑像素 ≈ 设备独立像素。

5、设置像素比（device pixel ratiodpr）：dpr = 物理像素 / 设备独立像素。可通过 window.devicePixelRatio 获取。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个 CSS 像素即：几 dpr。普通 Android 是一倍屏，在 Retina 屏的 iPhone 上，devicePixelRatio 的值为 2，也就是说 1 个 CSS 像素相当于 2 个物理像素。通常所说的二倍屏（Retina）的 dpr 是 2，三倍屏（IPhoneX 等）是 3 。

viewport 相关

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

visual viewport 可见视口 ：屏幕宽度window.innerWidth/Height
layout viewport 布局视口 ：DOM宽document.documentElement.clientWidth/Height
ideal viewport 理想视口 ：使布局视口就是可见视口
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale ：表示初始的缩放比例
minimum-scale ：表示最小的缩放比例
maximum-scale ：表示最大的缩放比例
user-scalable ：表示用户是否可以调整缩放比例

总结现有方案优劣

现有屏幕适配方案：

设置 viewport 的 scale 值为 1

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

根据屏幕的分辨率动态设置 html 的文字大小，达到等比缩放的功能

375 屏幕为 20px，以此为基础计算出每一种宽度的字体大小

　　Rem.less 中设置其他基础尺寸 @bps ：320px， 360px， 375px， 400px， 414px， 480px， 768px， 1024px

并计算相应的比例缩放：

.loop(@i: 1) when (@i <= length(@bps)) {  //注意less数组是从1开始的

  @bp: extract(@bps, @i);

  @font: round(@bp/@baseWidth*@baseFont, 1);

  @media only screen and (min-width: @bp){

    html {

      font-size: @font !important;

    }

  }

  .loop((@i + 1));

};

然后在 variables.less 中设置比例和行高：

@2ptr : 1/2/20rem @ptr : 1/20rem

最后所有 CSS 使用 @2ptr 和 @ptr 利用 rem 缩放 dom 、字体

其他主流适配方案优劣

方案：

1. 媒体查询 Media Queries

@media screen and (max-width: 300px){}

优点：
- Media Queries 可以做到设备像素比的判断，方法简单，成本低，特别是对移动和 PC 维护同一套代码的时候。目前像 Bootstrap 等框架使用这种方式布局
- 图片便于修改，只需修改 CSS 文件
- 调整屏幕宽度的时候不用刷新页面即可响应式展示
缺点：
- 代码量比较大，维护不方便
- 为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源
- 为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

2. Flex 弹性布局

固定 viewport 的高度等于设备高度，宽度自适应，元素都采用 px 做单位

<meta name="viewport" content="width=device-width,initial-scale=1">

随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻）

优点：布局更加精简，直接用 CSS 的方式，你不用再引入 Bootstrap ，使用栅格系统
缺点：IE10 及 IE10 以上才支持，所以目前主要应用在移动端上

3. rem + viewport

根据屏幕宽度设定 rem 值，需要适配的元素都使用 rem 为单位，不需要适配的元素还是使用 px 为单位
根据 rem 将页面放大 dpr 倍，然后 viewport 设置为 1 / dpr

如 iPhone6 plus 的 dpr 为 3，则页面整体放大 3 倍， 1px (css单位)在plus下默认为 3px (物理像素)
然后 viewport 设置为 1/3，这样页面整体缩回原始大小，从而实现高清。这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是 device-width 。这个 device-width 的计算公式为：
设备的物理分辨率 / (devicePixelRatio * scale)，在 scale 为 1 的情况下，device-width = 设备的物理分辨率 / devicePixelRatio

rem弊端

iOS 与 Android 平台的适配方式背后隐藏的设计哲学是这样的：阅读文字时，可读性较好的文字字号行距等绝对尺寸数值组合与文字所在媒介的绝对尺寸关系不大。（可以这样简单理解：A4 大小的报纸和 A3 大小甚至更大的报纸，舒适的阅读字号绝对尺寸是一样的，因为他们都需要拿在手里阅读，在手机也是上同理）。在看图片视频时，图片、视频的比例应该是固定的，不应该出现拉伸变形的情况。而 rem 用在字号时，使字号在不同屏幕上的绝对尺寸不一致，违背了设计哲学。

浏览器兼容

不支持 IE 8.0 以下、Safari 4.0 以下、FireFox 3.5以下

4. VW适配

如何在Vue项目中使用vw实现移动端适配

vw 可以轻松搞定弹性布局，流体布局。vw 逻辑非常清晰其实 vw 的方案的写法和 flexible 方案的写法一致
～～因为 flexible 其实就是用 hack 的手段模拟了 vw 的实现而已。
具体写法：针对 750px 的设计稿，将相应的 px 值除以 75 就是 vw 的值。

使用 vw 来实现页面的适配，并且通过 PostCSS 的插件 postcss-px-to-viewport 把 px 转换成 vw 。这样的好处是，我们在撸码的时候，不需要进行任何的计算，你只需要根据设计图写 px 单位。postcss-px-to-viewport 插件主要用来把 px 单位转换为 vw 、vh 、vmin 或者 vmax 这样的视窗单位，也是 vw 适配方案的核心插件之一。

为了更好的实现长宽比，特别是针对于 img、video 和 iframe 元素，通过 PostCSS 插件postcss-aspect-ratio-mini 来实现，在实际使用中，只需要把对应的宽和高写进去即可。

优点：rem ，使用 vw 和 wh 是非常直观的，让其他人看到就能知道，该界面是以怎么样的结构进行布局，利于维护
缺点：vw 在一些三星的机子会有兼容问题，导致失效，以及不同浏览器兼容问题

码农公寓