什么是 brig
brig 是一个实现了一个基于 js 和 CSS 的跨浏览器视口自适应方案的 npm 包，可以帮助前端开发人员方便地实现视口比例设定以及元素自适应功能。
此外，brig 还提供了一套钩子，用于在视口比例改变时监听元素位置和大小的变化，为开发人员提供了更多的灵活性和可自定义性。
brig 安装
在使用 brig 之前，需要先在项目中安装 brig。安装方法如下：
npm install brig --save
brig 基本使用
在 HTML 中引入 brig 库
在需要使用 brig 的 HTML 文件中加入以下代码，用于引入 brig。
<head> <script src="path/to/brig.min.js"></script> </head>
使用 brig 设定元素比例
brig 可以很容易地设定元素的宽高比例，例如下面这个例子：
<div id="myElement"></div>
var myElement = document.getElementById('myElement');
var brigInstance = new Brig(myElement, 16, 9);
brigInstance.update();上面这段代码表示需要设定的元素是一个 ID 为 myElement 的 div 元素，它的宽高比例应该是 16：9。brigInstance.update() 是必须要调用的方法，用于更新元素的布局。
监听视口变化
brig 还提供了一套钩子，用于在视口比例改变时监听元素位置和大小的变化。下面是一个监听器的例子：
brigInstance.onResize(function () {
console.log('Element resized');
});在视口变化后，就会调用这个钩子函数。
brig 配置选项
除了能够实现简单的宽高比例设定之外，brig 还提供了许多配置选项用于进行更加灵活的布局。
设定大小
可以通过setWidth(width)和setHeight(height)来设定元素的宽度和高度。
brigInstance.setWidth(100); brigInstance.setHeight(200);
设定最小、最大值
可以通过setMinWidth(minWidth)、setMaxWidth(maxWidth)、setMinHeight(minHeight)和setMaxHeight(maxHeight)来设定元素的最小值和最大值。
brigInstance.setMinWidth(50); brigInstance.setMaxHeight(300);
设定位置
可以通过setPosition(x, y)和setHorizontalAlignment(alignment)来调整元素的位置和对齐方式。
brigInstance.setPosition(50, 50);
brigInstance.setHorizontalAlignment('right');设定元素可见性
可以通过setVisible(visible)来设定元素的可见性。
brigInstance.setVisible(true);
结论
brig 是一个非常实用的 npm 包，可以帮助开发人员实现视口比例设定以及元素自适应功能。使用 brig 对于提高项目的灵活性和可自定义性有着重要的意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c87ccdc64669dde504a