fitview (github:https://github.com/pbstar/fitview)是一个视口自适应 js 插件,它支持多种适配模式,能够快速实现大屏自适应效果。
配置
- el: 需要自适应的 DOM 元素
- fit: 自适应模式,字符串,可选值为 fill、contain(默认值)、scroll、hidden
- uw: 设计稿宽度,数值,默认值 1920
- uh: 设计稿高度,数值,默认值 1080
- resize: 是否监听 resize 事件,布尔值,默认值 true
适配模式
(设计稿1920px*1080px)
-
fill: 拉伸,内容会被拉伸变形,使整个内容完全填充此视口框。
-
contain: 包含,内容不会被拉伸变形,使整个内容在填充此视口框时对内容两侧或底部添加“黑边”。
-
scroll: 滚动,内容不会被拉伸变形,使整个内容完全填充此视口框时对超出视口的内容添加滚动条。
-
hidden: 隐藏,内容不会被拉伸变形,使整个内容完全填充此视口框时对超出视口的内容隐藏。
安装引入
npm 安装
npm install fitview
esm 引入
import fitview from "fitview";
cdn 引入
<script src="https://unpkg.com/fitview@[version]/lib/fitview.umd.js"></script>
使用示例
<div id="container"></div>
const container = document.getElementById("container");
new pSeamlessScroll({
el: container,
});