Thanks to visit codestin.com
Credit goes to github.com

Skip to content
/ fitview Public

fitview 是一个视口自适应 js 插件,它支持多种适配模式,能够快速实现大屏自适应效果。

License

Notifications You must be signed in to change notification settings

pbstar/fitview

Repository files navigation

fitview 官方文档

GitHub license GitHub stars GitHub forks NPM Version npm bundle size

fitview 是一个视口自适应 js 插件,它支持多种适配模式,能够快速实现大屏自适应效果。

配置

  • el: 需要自适应的 DOM 元素
  • fit: 自适应模式,字符串,可选值为 fill、contain(默认值)、scroll、hidden
  • resize: 是否监听元素尺寸变化,布尔值,默认值 true

fit 适配模式

  • fill: 拉伸,内容会被拉伸变形,使整个内容完全填充此视口框。
  • contain: 包含,内容不会被拉伸变形,使整个内容在填充此视口框时对内容两侧或底部添加“黑边”。
  • scroll: 滚动,内容不会被拉伸变形,使整个内容完全填充此视口框时对超出视口的内容添加滚动条。
  • hidden: 隐藏,内容不会被拉伸变形,使整个内容完全填充此视口框时对超出视口的内容隐藏。

方法

  • api.refresh: 刷新,重新计算元素尺寸和位置。
  • api.destroyResize: 销毁元素尺寸变化监听。

安装引入

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 style="width:1920px;height:1080px;"></div>
</div>
const container = document.getElementById("container");
new fitview({
  el: container,
});

About

fitview 是一个视口自适应 js 插件,它支持多种适配模式,能够快速实现大屏自适应效果。

Resources

License

Stars

Watchers

Forks

Packages

No packages published