乐趣区

关于移动端:移动端自适应的常见手段

jiezi

残缺高频题库仓库地址：https://github.com/hzfe/awesome-interview

残缺高频题库浏览地址：https://febook.hzfe.org/

相干问题

  • 介绍 meta 的 viewport 值
  • rem 和 vw 的值是依据什么计算的
  • 1px 显示问题
  • 如何适配刘海屏

答复关键点

viewport 绝对单位 媒体查问 响应式图片

挪动端开发的次要痛点是如何让页面适配各种不同的终端设备，使不同的终端设备都领有基本一致的视觉效果和交互体验。挪动端常见的适配计划有以下几种，个别都是相互搭配应用。包含：

  • 视口元信息配置
  • 响应式布局
  • 绝对单位
  • 媒体查问
  • 响应式图片
  • 平安区域适配

知识点深刻

1. 相干概念

1.1 像素

分辨率（Resolution）

分辨率是指位图图像中细节的精密水平，以每英寸像素（ppi）掂量。每英寸的像素越多，分辨率就越高。

物理像素（Physical pixels）

物理像素是一个设施的理论像素数。

逻辑像素（Logical pixels）

是一种抽象概念。在不同的设施下，一个逻辑像素代表的物理像素数不同。CSS 像素是逻辑像素。

为了在不同尺寸和密度比的设施上体现出统一的视觉效果，应用逻辑像素形容一个雷同尺寸的物理单位。在具备高密度比的屏幕下，一个逻辑像素对应多个物理像素。

设施像素比（Device Pixel Ratio）

以后显示设施的物理像素分辨率与 CSS 像素分辨率之比。

相干问题：图片或 1px 边框显示含糊

在挪动端中，常见图片或者 1px 的边框在一些机型下显示含糊 / 变粗的问题。基于对像素相干的概念了解，可知 CSS 中的 1px 是指一个单位的逻辑像素。一个单位的逻辑像素映射到不同像素密度比的设施下，理论对应的物理像素不同。

因而，同样尺寸的图片在高密度比的设施下，因为一个位图像素须要利用到多个物理像素上，所以会比低密度比设施中的视觉效果含糊。

1.2 视口

视口（viewport）

视口个别是指用户拜访页面时，以后的可视区域范畴。通过滚动条滑动，视口能够显示页面的其余局部。在 PC 端上，<html> 元素的宽度被设置为 100% 时，等同于视口大小，等同于浏览器的窗口大小。通过 document.documentElement.clientWidth 或 window.innerWidth 能够获取视口宽度。CSS 布局基于视口大小进行计算。

因为挪动设施尺寸较小，如果基于浏览器窗口大小的视口进行布局，会导致一些没有适配过挪动设施款式的站点布局错乱，用户体验差。为了让挪动端也能失常显示未适配挪动设施的页面，从而引入布局视口和视觉视口的概念。

布局视口（layout viewport）

布局视口的宽度默认为 980px，通常比物理屏幕宽。CSS 布局会基于布局视口进行计算。挪动设施的浏览器基于虚构的布局视口去渲染网页，并将对应的渲染后果放大以便适应设施理论宽度，从而能够残缺的展现站点内容且不毁坏布局构造。

视觉视口（visual viewport）

视觉视口是布局视口的以后可见局部。用户能够通过缩放来查看页面内容，从而扭转视觉视口，但不影响布局视口。

2. 应用 viewport 元标签配置视口

开发者能够通过 <meta name="viewport"> 对挪动端的布局视口进行设置。如果不进行 viewport 元标签的设置，可能会导致开发者设定的较小宽度的媒体查问永远不会被应用，因为默认的布局视口宽度为 980px。

<!-- width 属性管制视口的大小。device-width 值指代设施屏幕宽度。-->
<!-- initial-scale 属性管制页面首次加载时的缩放级别。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

3. 应用古代响应式布局计划

除了应用浮动布局和百分比布局外，目前比拟常见的是应用 Flexbox 或 CSS Grid 来实现灵便的网格布局。能够依据以下条件来抉择布局计划：

  1. 须要一维还是二维布局：Flexbox 基于一条主轴方向进行布局。CSS Grid 可划分为行和列进行布局。如果只须要依照行或列进行布局则应用 Flexbox；如果须要同时依照行和列管制布局则应用 CSS Grid。
  2. 专一布局构造还是内容流：Flexbox 专一于内容流。Flex Item 的宽度或高度由我的项目中的内容决定。Flex Item 依据其外部内容和可用空间进行增长和放大。CSS Grid 专一于准确的内容布局构造规定。每个 Grid Item 都是一个网格单元，沿程度轴和垂直轴排列。如果容许内容灵便的调配空间则应用 Flexbox；如果须要精确管制布局中我的项目的地位则应用 CSS Grid。

4. 应用媒体查问（Media Queries）

媒体查问容许开发者依据设施类型和特色（如屏幕分辨率或浏览器视口宽度）来按需设置款式。

/* 当浏览器宽度至多在 600px 及以上时 */
@media screen and (min-width: 600px) {
  .hzfe {/* 对 .hzfe 利用某些款式  */}
}

/* 当设施 DPR 为 2 时的款式 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-1 {border-width: 0.5px;}
}

5. 应用绝对单位

挪动端开发须要面对非常繁冗的终端设备尺寸。除了应用响应式布局、媒体查问等计划之外，在对元素进行布局时，个别会应用绝对单位来取得更多的灵活性。

rem

依据 W3C 标准可知，1rem 等同于根元素 html 的 font-size 大小。

因为晚期 vw、vh 兼容性不佳，一个应用宽泛的挪动端适配计划 flexible 是借助 rem 来模仿 vw 个性实现挪动端适配。在设计与开发时，通常会约定某一种尺寸为开发基准。开发者能够利用工具（如 px2rem）进行相对单位 px 和其余 rem 单位的主动换算，而后利用 flexible 脚本动静设置 html 的字体大小和<meta name="viewport">。

vw/vh

因为目前 vw、vh 相干单位取得了更多浏览器的反对，能够间接应用 vw、vh 单位进行挪动端开发。

同理于 flexible 计划，应用 vw、vh 也须要对设计稿中的尺寸进行换算，将 px 转换为 vw 值，常见的工具如 postcss-px-to-viewport 等能够满足需要。

6. 应用响应式图片

展现图片时，能够在 picture 元素中定义零或多个 source 元素和一个 img 元素，以便为不同的显示 / 设施场景提供图像的代替版本。从而使得图片内容可能灵便响应不同的设施，避免出现图片含糊或视觉效果差以及应用过大图片节约带宽的问题。

source 元素能够按需配置 srcset、media、sizes 等属性，以便用户代理为不同媒体查问范畴或像素密度比的设施配置对应的图片资源。如果没有找到匹配的图像或浏览器不反对 picture 元素，则应用 img 元素作为回退计划。

<picture>
  <source
    srcset="hzfe-avatar-desktop.png, hzfe-avatar-desktop-2x.png 2x"
    media="(min-width: 990px)"
  />
  <source
    srcset="hzfe-avatar-tablet.png, hzfe-avatar-tablet-2x.png 2x"
    media="(min-width: 750px)"
  />
  <source
    srcset="hzfe-avatar-mobile.png, hzfe-avatar-mobile-2x.png 2x"
    media="(min-width: 375px)"
  />
  <img
    srcset="hzfe-avatar.png, hzfe-avatar-2x.png 2x"
    src="hzfe-avatar.png"
    alt="hzfe-default-avatar"
  />
</picture>

7. 适配平安区域

因为手机厂商各有特色，目前手机上常见有圆角（corners）、刘海（sensor housing）和小黑条（Home Indicator）等特色。为保障页面的显示成果不被这些特色遮蔽，须要把页面限度在平安区域范畴内。

<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />

设置 viewport-fit=cover 后，按需借助以下预设的环境变量，对元素利用 padding，从而确保它们不会被一些以上特色遮蔽：

  • safe-area-inset-left
  • safe-area-inset-right
  • safe-area-inset-top
  • safe-area-inset-bottom
/* 例子：兼容刘海屏 */
body {
  /* constant 函数兼容 iOS 11.2 以下 */
  padding-top: constant(safe-area-inset-top);
  /* env 函数兼容 iOS 11.2 */
  padding-top: env(safe-area-inset-top);
}

参考资料

  1. iOSRes
  2. Viewport concepts
  3. A tale of two viewports
  4. Responsive Design
  5. Relationship of grid layout to other layout methods
  6. Designing Websites for iPhone X
退出移动版