乐趣区

关于前端:移动端适配方案总结

jiezi

引言

最近的工作着重于挪动端场景以及大屏场景业务开发，本篇文章次要对这些我的项目中利用的挪动端适配计划进行梳理与总结。

视口配置

在挪动端开发场景下，对于 视口（<meta name=”viewport”… />）的举荐初始配置如下：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  • width=device-width —— 使以后视口宽度与设施宽度统一
  • user-scalable=no —— 禁止用户进行缩放操作
  • initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0 —— 将各个缩放比均设置为 1.0

高清计划

DPR（设施像素比）

物理像素、逻辑像素以及设施像素比。
为什么会呈现以上概念？因为当初手机屏幕广泛采纳了 视网膜屏技术 ， 即用多个物理像素来渲染一个逻辑像素 ， 从而使屏幕显示成果更佳清晰细腻 。
物理像素（设施像素）：指设施屏幕理论存在的像素点 ， 即设施理论分辨率 。
逻辑像素（CSS 像素）：指设施零碎设置的像素 ，对开发者而言， 是在理论开发中应用的像素（零碎设置的像素），在 Chrome 开发者面板可查看到设施的逻辑像素 。
设施像素比（DPR）：指 在某一方向（即宽度方向或高度方向) 的 物理像素与逻辑像素之比（物理像素 / 逻辑像素），DPR 越高，意味着设施显示成果越清晰细腻。

以 iPhone12 Pro 为例：

  • 物理像素: 在宽度方向领有 1170 个像素点，在高度方向领有 2532 个像素点，即尺寸为 1170*2532。
  • 逻辑像素: 在 Chrome 开发者工具以 iPhone12 Pro 为以后设施时，对应的尺寸为 390*844。
  • 即设施像素比为 1170 / 390 = 3

图片高清计划

因为设施像素比的呈现，在开发中，为了保障图片的显示清晰度，须要在不同的 DPR 下加载不同尺寸的图片（多倍图）。

在 JavaScript 中 ， 设施像素比可通过 window.devicePixelRatio 获得。

在 CSS 中，设施像素比可通过 -webkit-device-pixel-ratio、-webkit-min-device-pixel-ratio、-webkit-max-device-pixel-ratio 等获得。以上属性须要在媒体查问中应用 ， 用于批改 background-imag，且只反对 webkit 内核的浏览器。

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) { }

@media only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3) {}

1px 边框

当设施 DPR 大于 1，例如 DPR 为 2 时，意味着 1px 在屏幕上理论出现的成果比 DPR 为 1 设施粗一倍 （这是因为 DPR 2 设施应用了 2 个物理像素渲染了 1 个逻辑像素造成的），导致视觉效果与设计稿预期成果不统一， 即便采纳了 vw 或 rem 作为 border-width 单位，但大小可能会小于 1px，这在各浏览器的兼容性不佳 。
倡议通过伪元素 + transform scale 缩放来实现 1px 边框 ，具体如下：
创立一个 height:1px 的伪元素 ，通过 transform:scaleY(0.5) 将其放大一倍， 应用相对定位来决定其为高低边框或左右边框。

.scale-1px{
  position: relative;
  border:none;
}
.scale-1px::after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

等比缩放适配

等比缩放适配计划 ： 使得页面中元素大小以及文字大小随着屏幕大小的缩放而等比缩放，具体可通过 rem、vw 等绝对单位来实现。

rem 计划

rem：绝对单位，示意绝对于 html 标签 font-size 的大小。

rem 计划实现步骤：

  1. 监控屏幕宽度的变动，动静设置 html 标签 font-size 的大小 （可通过 JavaScript 实现，也可通过媒体查问实现），从而 使得随着屏幕大小的变动，元素及文字的大小也随着等比变动。

    • JavaScript 实现：通过 JavaScript 监控屏幕宽度的变动，从而动静批改 html 标签的 font-size 值。

    • 媒体查问实现 ：通过媒体查问依据不同的屏幕宽度（ 笼罩不同机型的屏幕宽度），设置相应的 html font-size 值。

      • 以设计稿宽度作为屏幕宽度规范 ， 设置 html 标签 font-size 初始值为 1px ，则 页面中元素单位可间接采纳设计稿对应尺寸值 （单位为 rem）， 其余屏幕宽度的 font-size 值 为 屏幕宽度 / 设计稿宽度。

  2. 页面中元素的宽高边距以及文字大小等对立采纳 rem 作为单位。

    • 须要将设计稿的 px 值转换为对应的 rem 值，转换公式：设计稿 px 值 / html 标签 font-size 值 = rem 值

相干插件

  • px 转 rem：https://github.com/cuth/postcss-pxtorem
  • 动静设置 html 标签 font-size 大小：https://github.com/amfe/lib-flexible

毛病：须要 额定引入 监控屏幕宽度变动动静更改 html 标签 font-size 大小的 JavaScript，采纳媒体查问也会存在适配的“断层”问题，因为 浏览器已反对 vw 单位，举荐应用 vw 计划来代替 rem 计划。

vw 计划

vw：绝对单位，示意绝对以后视口宽度的百分比，1vw 示意以后视口宽度的 1%。
vh：绝对单位，示意绝对以后视口高度的百分比，1vh 示意以后视口高度的 1%。
vmin：绝对单位，示意绝对以后视口较小尺寸的百分比，1vmin 示意以后视口较小尺寸的 1%（常在须要横屏适配时应用）。
vmax：绝对单位，示意绝对以后视口较大尺寸的百分比，1vmax 示意以后视口较大尺寸的 1%。

vw 计划实现步骤
对于元素的宽高边距以及文字大小等对立采纳 vw/vmin 作为单位。

以 375px 尺寸设计稿为例，推导 1px 等于多少 vw：
375px / 1px = 100vw / ?vw
?vw = 100 / 375
?vw = 1 / 3.75
即，375px / 1px = 100vw / 1vw / 3.75
1px = 1vw / 3.75

设计稿 px 值转 vw 值公式 ： 设计稿相应元素尺寸 / 设计稿宽度 / 100 = vw 值
举荐采纳设计稿尺寸进行开发，而后应用 postcss-px-to-viewport 插件实现主动转换即可。

毛病：不反对设置页面的最小宽度和最大宽度，页面元素尺寸仍将随着屏幕变动而变动，即便以后屏幕小于最小宽度或者大于最大宽度。

rem + vw 计划

通过将 rem + vw 计划 联合应用，可 实现等比缩放适配 ，同时 反对设置页面的最大宽度或最小宽度。

实现步骤
设置 html 标签 font-size 值为 vw 值 ，1vw 相当于屏幕宽度的 1%， 以 750px 设计稿宽度为例：

  • 1vw = 750 / 100 = 7.5px
  • 1px = 1vw / 7.5px = 0.133333vw

则 将 html 标签 font-size 值设为 0.13333vw，页面元素及文字的尺寸与设计稿相应元素尺寸保持一致即可 （ 单位为 rem）。

html {font-size: 0.133333vw;}
/* 针对 PC 端，屏幕宽度超过 750px 的状况. */
@media screen and (min-width: 750px) {
  html {font-size: 1px;}
}
div{
  width:200rem;
  height:150rem;
}

局限性与利用场景

等比放大意味着更大的屏幕无奈显示更多的内容 ，但在某些场景下， 用户可能心愿在更大的屏幕下能尽可能看到更多的内容 。
因而，倡议在信息流等浏览内容较多的场景下，应用 px + Flex 布局即可 ； 对于视觉元素较多的场景下，应用 vw 适配，当须要设置最小宽度或最大宽度的场景时（例如大屏开发场景），采纳 rem + vw 适配。

退出移动版