背景
在前端开发中，我们常常需要解决响应式布局的问题，如针对不同设备的不同屏幕尺寸进行布局调整。这时候我们可以使用一些响应式布局工具/框架来协助我们完成布局工作，npm 包 @matthamlin/resp 就是其中之一。本文主要介绍如何使用 @matthamlin/resp 工具实现响应式布局。
@matthamlin/resp 是什么？
@matthamlin/resp 是一个轻量级（2KB）的 React 组件库，提供了一些响应式布局的实用工具。该库有以下功能特点：
- 具有强大的分辨率表达能力：使用分辨率宽度值来定义布局，而非使用 Xs, S, M, L, XL 等抽象的术语来定义。
- 提供了一些常用的布局尺寸（如 25%, 50%, 75%, 100%）来减少手写样式的代码量。
- 提供了一些针对不同大小屏幕的 media query 值。
如何使用 @matthamlin/resp？
安装
可以使用 npm 或 yarn 安装 @matthamlin/resp：
npm install @matthamlin/resp --save
或
yarn add @matthamlin/resp
基本使用
@matthamlin/resp 的核心组件是 Resizable，并且它具有一个 name 属性，用于定义响应式行为的内部名称。
在使用 @matthamlin/resp 前，建议先设置一个媒体查询中断点（最小宽度）。例如，Responsive 中通过 setBreakpoints 方法来设置中断点：
-- -------------------- ---- ------- ------ - ---------- - ---- ------------------- ----- ----------- - - ------- -- ------- ---- -------- ---- -- ---------------------------------------
接下来，就可以在组件中引入 Resizable 组件并使用了：
-- -------------------- ---- -------
------ - --------- - ---- -------------------
------ ------- -------- --------- -
------ -
---------- -------------- -------------- - -- ---------------
------- -- -- --------- ---------------
------------
--
-上面代码是一个简单的 Resizable 组件，实现对嵌入的元素进行响应式布局。
其中，name 属性用于定义组件内部的名称，它通常用来作为 window.matchMedia 方法的键值使用。
在默认情况下，Resizable 组件将占用容器的 1/3 大小，并且在容器小于 300px 的时候，停止计算边缘。
响应式行为
当我们指定 Resizable 的 width 属性为特定的尺寸（例如 50%）时，Resizable 将始终占用屏幕的一半宽度。
当我们指定 Resizable 的 minWidth 和 maxWidth 属性时，Resizable 将始终保持最小和最大宽度，不管屏幕的大小如何。
例如，如果我们希望在大屏幕上使用 Resizable 宽度占 1/3，而在小屏幕上宽度占 1/2，我们可以通过以下代码实现：
-- -------------------- ---- -------
------ - --------- - ---- -------------------
------ ------- -------- --------- -
------ -
--
----------
--------------
-------------- - --
----------- ------- ---- -------- --- --
----------- ------- ---- -------- --- --
-
------- -- -- --------- --------------
------------
---
--
-上面的代码中，minWidth 和 maxWidth 属性以对象的形式传递，并分别使用 tablet 和 desktop 关键字指定了不同设备上的最小和最大宽度。
媒体查询
@matthamlin/resp 类库提供了一些自定义的 media query 值，可以通过以下方法来获取它们：
import { Responsive } from '@matthamlin/resp';
Responsive.getMax("tablet-down"); // matches `max-width: 600px`
Responsive.getMin("mobile"); // matches `min-width: 0px`其中 Responsive.getMax 方法传递一个字符串参数，指定自定义的 media query 名称，返回对应的 max-width 的值，同理， Responsive.getMin 传递的参数是对应的 min-width 的值。
使用 bestMatch 属性
bestMatch 是 Resizable 组件的一个属性，它用于指定组件的尺寸行为。
当 bestMatch 设置为 true 时，组件的默认大小将是其最匹配的 break 长度。
-- -------------------- ---- -------
------ - --------- - ---- -------------------
------ ------- -------- --------- -
------ -
---------- -------------- -----------------
------- -- -- --------- --------------
------------
--
-上面代码中，当 bestMatch 为 true 时，组件将尽可能的在布局中寻找最佳匹配尺寸。
总结
通过本文，我们了解了 @matthamlin/resp 这个 npm 包，并学习了如何使用它来实现响应式布局。在实际项目中，我们可以根据不同的需求选择最适合的响应式布局方案，@matthamlin/resp 是其中之一可供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e244707