什么是 PWA？
PWA（Progressive Web App）是使用 Web 技术开发的应用程序，具有类似于“原生应用”的体验和功能，包括一流的离线体验、快速加载、推送通知、桌面图标等。这些都是可靠的、充满活力的 Web app 应该具有的功能，同时 PWA 还可以适配不同设备的各种屏幕尺寸，实现响应式布局。
实现 PWA 应用的屏幕适配
屏幕尺寸不同的设备是我们需要面对的一个重要问题。为了使 PWA 应用更加完美地适应在各种屏幕上的表现，我们需要实现一套具有完善响应式的布局方案。
方案一：CSS3 媒体查询
CSS3 媒体查询是一种基于查询一个文档中的设备特征、包括视口尺寸、设备宽高比和颜色等的技术。可以根据不同的屏幕尺寸，来自动加载不同的样式。
下面是一个以 iPhone 6 的屏幕尺寸为基础的 CSS3 媒体查询示例代码：
/* iPhone 6 的媒体查询 */
@media (min-device-width: 667px) and (max-device-width: 736px) {
/* 在此处放置与 iPhone 6 相关的 CSS 样式 */
}方案二：Flexbox 和 Grid
Flexbox 和 Grid 是 CSS 的新特性，它们可以让我们更轻松地实现响应式的布局。Flexbox 是用于布置单行或单列元素的，而 Grid 则可以轻松地布置多行和多列元素。
以下是一个使用 Flexbox 和 Grid 实现响应式布局的示例代码：
<div class="container"> <div class="box-1">Box 1</div> <div class="box-2">Box 2</div> <div class="box-3">Box 3</div> </div>
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
---------------- -------
------------ -------
-
------ -
----- --
---------- ------
---------- ------
------- ------
----------------- ----
-
------ -
----- --
---------- ------
---------- ------
------- ------
----------------- -----
-
------ -
----- --
---------- ------
---------- ------
------- ------
----------------- ------
-
------ ------ --- ----------- ------ -
------- ------- ------ -
---------- ------
---------- ------
-
-方案三：Viewport 和 REM
Viewport 是浏览器提供的一种方法，用于定义网页的可见区域。使用 meta 标记可以更好地控制视口的大小和方向。
REM（缩写来自“root em”）是一个相对单位，它是相对于根元素的字体大小（即 html 元素的 font-size）而言。
以下是一个使用 Viewport 和 REM 实现响应式布局的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
--------- --- -----------
-------
---- -
---------- -----
-
---- -
------- --
-------- --
------------ -----------
-
-- -
---------- -------
------- --
-------- -----
----------------- --------
-
- -
---------- -----
------- -----
------------ ----
-
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
--------
-------
------
---------- -----------
------- -- -- ------- --- --------
-------
-------总结
以上就是 PWA 应用中的屏幕适配实现方案，我们可以使用 CSS3 媒体查询、Flexbox 和 Grid、Viewport 和 REM 等一系列技术来帮助我们实现响应式布局，以适应各种屏幕尺寸的设备。当然，在使用这些技术时需要考虑到自己的具体开发需求，才能达到最好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a04a5048841e9894ca0acb