移动端屏幕适配方案

前言

移动设备的多样性和屏幕尺寸挑战

移动设备已经成为我们日常生活中不可或缺的一部分，无论是智能手机、平板电脑、笔记本电脑还是各种智能穿戴设备，它们都在改变着我们的生活方式和工作方式。然而，正是这种多样性和普及性带来了一个巨大的挑战：屏幕尺寸多样性。

这种多样性意味着开发人员必须面对一个重要的挑战，如何确保他们的应用和网站在各种不同尺寸的屏幕上都能正常运行和提供出色的用户体验。以下是一些与屏幕尺寸多样性相关的挑战：

布局适配：不同尺寸的屏幕需要不同的布局。开发人员必须考虑如何调整布局以适应各种屏幕尺寸，同时保持应用的一致性和美观。
字体和文本大小：在小屏幕上阅读小字体可能会导致用户体验问题，而在大屏幕上使用过大的字体可能会导致浪费空间。开发人员需要找到适合不同屏幕尺寸的字体大小。
图像和多媒体：图像和多媒体资源的尺寸和分辨率必须适应屏幕大小，以避免图像模糊或显示不完整。
用户界面元素：按钮、导航菜单、输入字段等用户界面元素的大小和间距需要根据屏幕尺寸进行调整，以确保用户能够轻松地与应用交互。
性能优化：较小的屏幕通常有更少的计算资源，因此开发人员需要在小屏幕设备上优化性能，以确保应用流畅运行。

屏幕尺寸基本概念

屏幕尺寸

屏幕尺寸是指屏幕的对角线长度，通常以英寸（inch）为单位表示，一英寸大约 2.54cm。这是衡量屏幕物理大小的一种方式。较大的屏幕通常适合于观看电影和进行多任务处理，而较小的屏幕则适合于便携和移动设备。

像素（px）

像素是图像和屏幕上最小的可见点。它们是构成数字图像的基本元素，通常以正方形的点排列在屏幕上。像素可以是不同颜色的，它们合在一起形成了屏幕上的图像。

例如，一个 1920x1080 像素的屏幕意味着它在水平方向上有 1920 个像素，垂直方向上有 1080 个像素，总共有 2073600 个像素点。

液晶屏显示图像，放大来看是一个个小点组成的，这些小点就是像素点，如下图所示：

物理像素（Physical Pixels）

物理像素是屏幕上的实际像素点，它们在屏幕上的排列和密度是固定的。不同尺寸的设备可能具有不同数量的物理像素。

逻辑像素（Logical Pixels）

逻辑像素是相对于屏幕分辨率的单位，用于在不同分辨率的设备上维护一致的图像和界面大小。逻辑像素通常用于响应式设计中，以确保内容在不同尺寸和分辨率的设备上都有良好的可读性和显示效果。

设备像素比（Device Pixel Ratio）

设备像素比像素比是屏幕上物理像素和逻辑像素之间的比率。高分辨率屏幕可能具有更高的像素比，这意味着一个逻辑像素可能对应多个物理像素，从而提高了图像的清晰度。

分辨率

分辨率是指屏幕上可显示的像素数量，通常以水平像素数 × 垂直像素数表示。

例如，一个 1920x1080 像素的分辨率意味着屏幕水平方向上有 1920 个像素，垂直方向上有 1080 个像素。分辨率决定了屏幕上可显示的图像和文本的细节程度。

同一张图片在不同的分辨率屏幕上显示的效果如下图所示：

每英寸点数（DPI）

DPI（Dots Per Inch）是"每英寸点数"的缩写，表示在每英寸长度内有多少个输出点。它通常用于描述打印机和图像扫描仪的输出质量。较高的 DPI 意味着更多的输出点被压缩到每英寸的空间中，从而提高了图像的细节和清晰度。

比如：打印机输出可达 600 DPI，表示打印机可以在每一平方英寸的面积中可以输出 600 x 600 ＝ 360000 个输出点。

每英寸像素（PPI）

PPI（Pixels Per Inch）是"每英寸像素"的缩写，通常用于描述屏幕的像素密度。与 DPI 类似，PPI 表示在每英寸长度内有多少个像素。对于屏幕而言，较高的 PPI 通常意味着屏幕上的图像和文本更清晰，因为更多的像素被压缩到相同的空间中。

视口（Viewport）

视口是指浏览器或应用程序中用于显示网页或应用内容的可见区域。不同尺寸的设备具有不同的视口大小，开发人员可以使用视口元标签来控制视口的大小和缩放行为。

屏幕适配方案

媒体查询

这种方式是利用 CSS3 的 Media Query（媒体查询）技术实现，通过媒体查询根据不同的屏幕分辨率来进行适配。

css 复制代码

body {
  background-color: yellow;
}

@media screen and (min-width: 375px) {
  body {
    background-color: blue;
  }
}

但响应式布局的问题在于：

屏幕分辨率分区间：通常使用主流分辨率来进行区间划分，区间内无法进行区分，无法保证 100% 兼容
额外的工作量：由于每个分辨率区间都会形成一套样式，响应式布局增加了额外的开发量
不适合功能复杂的页面：响应式一般适用于较简洁的页面，功能复杂的页面整体排版和样式要求较高

viewport 缩放

以 iPhone 4/5 的宽度（320px）为基准，还原视觉稿：

html 复制代码

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

对不同分辨率的屏幕进行等比例缩放，比如 iPhone 6 (宽度为 375px)：

html 复制代码

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

对于大多数情况而言，视口是一个非常有用的工具，可以帮助确保您的网页或应用在各种设备上都能提供出色的用户体验。但在确保在各种设备上实现视觉一致性方面仍然存在挑战。会导致页面图片文字失真模糊，一些设备可能会导致布局问题，需要额外的工作来解决。

vw 适配

vw 表示窗口大小，单位为百分比，1vw 表示窗口大小的 1%。根据设计稿，让那个设计稿的宽度为 100%，书写的时候就按照元素尺寸/设计稿宽度*100vw

rem 适配

rem 是相对于 html 字体大小的单位，1rem = html 的 font-size 值。

例如我们设置 font-size：16px,那 1rem = 16px

根据这个特性，我们可以通过动态调整根节点的字体大小，整体缩放页面的元素

举个例子

设计师交付的设计稿宽度是 750px，设计稿上一个 div 的标注尺寸是 375px（宽度是设计稿宽度的一半）。我们可以

设置 html 的 font-size 为 100 * 屏幕宽度 / 设计稿宽度

在写 CSS 时设置 div 的宽度是 3.75rem （计算时用设计稿标注值除以 100）

假设用户在逻辑像素宽度是 375px 的设备上打开页面，则 html 的 font-size 是 100 * 375 / 750 = 50px，div 的宽度是 3.75rem ，即 187.5px 正好是屏幕宽度的一半。

假设用户在逻辑像素宽度是 428px 的设备上打开页面，则 html 的 font-size 是 100 * 428 / 750 = 57.07px，div 的宽度是 3.75rem ，即 214px 正好是屏幕宽度的一半。

为什么要用 100 来乘以屏幕宽度/设计稿宽度？其实 100 只是随便选取的一个值，我们也可以随便其他任意值比如 50。如果选 100，设计稿中某个元素标注的尺寸是 375px，我们可以很快速的计算出 3.75rem。如果 html 的 font-size 设置为 50*屏幕宽度/设计稿宽度，那么 div 的宽度就应该是 7.5rem 了。换算起来就没那么直观了。

总结

在实际的项目开发中，使用 rem 适配的方式是业界各大框架使用较多的方案。其它的方案可以在特定的场景下做小范围使用。

设计师和前端的协作模式

选择一种尺寸作为设计和开发基准
定义一套适配规则，自动适配剩下的尺寸
特殊适配效果给出设计效果

常选择 iPhone6 作为基准设计尺寸，交付给前端的设计尺寸是按 750px * 1334px 为准(高度会随着内容多少而改变)。前端开发人员通过一套适配规则自动适配到其他的尺寸

移动端屏幕适配：如何处理不同设备的尺寸适配问题