简介
tgl 是一个能够根据屏幕大小与浏览器窗口大小进行响应性设计的 npm 包。在不同的设备上，它能够显示不同的布局和样式，从而适应不同的屏幕尺寸。如果你正在开发一个响应式设计的网站或应用程序，tgl 将是你的不二之选。
安装
要使用 tgl，你需要在你的项目中安装它。使用 npm 安装，可以通过以下命令：
npm install --save tgl
安装完成后，你可以通过下面的方式在你的项目中引入：
import { Tgl } from 'tgl';基本使用
使用 tgl 进行响应式设计的基本方式，是通过设定不同的断点（breakpoints），来确定在不同宽度下应该显示什么样式。我们可以使用如下方式定义断点：
const breakpoints = {
xs: 480, // 小于 480px
sm: 768, // 大于等于 480px 且小于 768px
md: 992, // 大于等于 768px 且小于 992px
lg: 1200 // 大于等于 992px 且小于 1200px
};我们可以使用 Tgl 类来创建一个响应式设计的实例。这个实例可以在我们的页面上处理各种布局与样式的变化。
-- -------------------- ---- -------
-- ------- --- --
----- --- - --- -----------------
-- -------------------
----- ------ - -
--- -
----------- ------
--
--- -
----------- ------
--
--- -
----------- ------
--
--- -
----------- ------
-
--
-- --------- --- - -------- ------- ---- ------
------------------ ---------------上面的代码会让 .my-element 这个元素，在不同的屏幕宽度下显示不同的颜色。
更多操作
除了上面的基本使用方法外，tgl 还提供了更多的实用操作。以下是一些示例。
获取当前设备当前断点的名称
const currentBreakpoint = tgl.getCurrentBreakpoint(); console.log(currentBreakpoint); // 输出当前设备的断点名称
获取当前断点的最小宽度
const currentMinWidth = tgl.getCurrentMinWidth(); console.log(currentMinWidth); // 输出当前设备的断点最小宽度
监听断点变化
当设备的断点发生变化时，我们可以执行一些自定义的回调函数。
tgl.onBreakpointChange((newBreakpoint, oldBreakpoint) => {
console.log(`从 ${oldBreakpoint} 到 ${newBreakpoint}`);
});使用默认断点
如果你觉得上面的定义断点的方法比较麻烦，你也可以使用 tgl 提供的默认断点。这些默认断点分别为 sm，md，lg 三种，其对应的最小宽度分别为 576px，768px，992px。在使用时，只需要简单地创建一个 tgl 实例，不需要传入额外的参数即可。
const tgl = new Tgl();
自定义默认断点
在不同场景下，我们可能需要自定义默认断点的宽度。这时，需要使用 Tgl 的静态方法 setDefaultBreakpoints() 函数。以下示例将默认的 576px 改为 480px：
Tgl.setDefaultBreakpoints({
sm: 480,
md: 768,
lg: 992
});结语
以上就是 tgl 的基本使用方法和一些高级操作。使用 tgl，你可以很容易地开发出响应式设计的网站或应用程序，在不同的设备上提供更好的用户体验。希望这篇文章能够对你有所帮助。完整代码示例请见下面：
-- -------------------- ---- -------
------ - --- - ---- ------
-- ----
----- ----------- - -
--- ---- -- -- -----
--- ---- -- ---- ----- --- -----
--- ---- -- ---- ----- --- -----
--- ---- -- ---- ----- --- ------
--
-- -- --- --
----- --- - --- -----------------
-- ----
----- ------ - -
--- -
----------- ------
--
--- -
----------- ------
--
--- -
----------- ------
--
--- -
----------- ------
-
--
-- ------
-------------------------------------- -------------- -- -
-------------- ---------------- - -------------------
---
-- ----
------------------ ---------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa981e8991b448d8344