介绍
Bootstrap 等前端框架中的视口断点被广泛使用来设置响应式设计，但是如果您仅在需要视口断点时使用这些框架，它们可能会增加您的整体文件大小。@barebone/var-viewport-breakpoints 可以在不依赖大型框架的情况下将视口断点轻松添加到您的项目中。
安装
您可以使用以下命令来安装包：
npm install @barebone/var-viewport-breakpoints
该包已被注册到 npm，因此您可以通过全局下载和安装它，也可以将其添加到项目依赖项中以便在应用程序中使用。
如何使用
引入样式表
您可以在您的应用程序中引入该包中的样式表并设置您需要的自定义变量。在您的样式表中添加以下行：
@import '~@barebone/var-viewport-breakpoints';
此包将自动定义以下变量：
-- -------------------- ---- ------- ------------- - --- -- --- ------ --- ------ --- ------ --- ------- --- ------- ---- ------ ----------
如果您需要更改这些值，您可以在您的样式表中定义自己的 $breakpoints。
$breakpoints: ( my-breakpoint-1: 300px, my-breakpoint-2: 600px, my-breakpoint-3: 900px, my-breakpoint-4: 1200px )!default;
使用 mixin
您可以使用以下 mixin 将媒体查询添加到您的样式表中：
@include media('>my-breakpoint-2') {
// 添加您的样式
}或者，您可以使用以下快捷 mixin：
@include until(my-breakpoint-2) {
// 添加您的样式
}
@include from(my-breakpoint-2) {
// 添加您的样式
}这些 mixin 将生成以下媒体查询：
@media (min-width: $breakpoints[my-breakpoint-2]) {
// 添加您的样式
}
@media (max-width: $breakpoints[my-breakpoint-2 - 1px]) {
// 添加您的样式
}示例代码
以下是一个示例样式表，其中使用 @barebone/var-viewport-breakpoints 包中的媒体查询设置样式：
-- -------------------- ---- -------
------- --------------------------------------
-- -----
-------- --------
------ -----
-- ---------
---- -
----------- ------
-
-- ------
-- -
---------- -----
------ --------
-------- ---------------------- -
-- ------- --------------- -------
---------- -----
-
-
-- ------
------ -
----------- --------
------ -----
-------- ---- -----
------- -----
-------------- ----
-------------- -----
-------- --------------------- -
-- --------- --------------- -------
-------- ---- -----
---------- -----
-
-在上述示例中，我们定义了自定义视口断点 my-breakpoint-1，my-breakpoint-2，my-breakpoint-3 和 my-breakpoint-4，并使用 until 和 from mixin 将样式随着屏幕的大小而变化。
结论
@barebone/var-viewport-breakpoints 包使您可以轻松定义自定义视口断点，您可以使用这些断点调整响应式设计样式。此软件包避免了依赖大型框架，并确定了一个简单的方法来变得更加专业。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556e281e8991b448d3bf4