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