autofit.js_用极少的代码，轻松实现大屏的自动适配

Web前端开发网

fly63.com

首页资源工具文章教程栏目

autofit.js

网站地址:https://auto-plugin.github.io/autofit.js

GitHub:https://github.com/Auto-Plugin/autofit.js

网站描述:用极少的代码，轻松实现大屏的自动适配

访问官网

GitHub

autofit.js 迄今为止最易用的自适应工具

autofit.js 是一个轻量级的JavaScript库，它的核心思想非常直接：自动缩放。

它不会去改动你原有的css布局（比如Flexbox或Grid），而是将你的整个网页内容视为一个“整体”，然后通过CSS的 transform: scale() 属性，对这个整体进行缩放，使其完美适应目标屏幕。

你可以把它想象成浏览器内置的“缩放”功能（Ctrl+加号/减号），但它是自动的、精确的，并且是针对你的容器元素进行的。

特点

易用：调用仅需一行代码，即可适配设置分辨率以下的所有屏幕，无需任何其他辅助

轻量：纯js原生代码，gzip后仅有2.71KB，支持多种引入方式，且无任何第三方依赖

性能：只影响一个元素样式，计算量极小，提供关闭选项和个性化参数

第一步：安装与引入

你可以通过多种方式获取 autofit.js。

方式一：直接CDN引入（最简单）
在你的html文件 </body> 标签前引入：

<script src="https://unpkg.com/autofit.js"></script>

方式二：使用npm安装
如果你的项目使用了模块化构建（如vue、react），可以通过npm安装：

npm i autofit.js

然后在你的主入口文件（如 main.js， App.vue）中引入并使用：

import autofit from ‘autofit.js‘
// 或者 const autofit = require(‘autofit.js‘)

第二步：准备你的HTML结构

假设我们有一个标准的大屏页面，其设计稿尺寸为 1920px * 1080px。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化大屏</title>
    <style>
        /* 重置样式，确保容器能撑满页面 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { width: 100%; height: 100%; overflow: hidden; }

        /* 这是我们的设计稿容器，固定为设计稿尺寸 */
        #app {
            width: 1920px;
            height: 1080px;
            position: relative;
            background: linear-gradient(to bottom, #0a1a3b, #0c0d2a);
            color: white;
        }

        /* 内部的一些示例元素，按照设计稿的绝对位置布局 */
        .header { position: absolute; top: 20px; left: 40px; font-size: 36px; }
        .chart-box {
            position: absolute;
            width: 400px;
            height: 300px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 20px;
        }
        #chart1 { top: 100px; left: 40px; }
        #chart2 { top: 100px; left: 500px; }
    </style>
</head>
<body>
    <!-- 这个div就是我们需要适配的容器 -->
    <div id="app">
        <div>数据可视化监控大屏</div>
        <div id="chart1">图表区域1</div>
        <div id="chart2">图表区域2</div>
        <!-- ... 其他更多图表和组件 -->
    </div>

    <script src="https://unpkg.com/autofit.js"></script>
    <script>
        // 初始化代码将写在这里
    </script>
</body>
</html>

现在，如果你直接在浏览器中打开这个页面，并且你的屏幕宽度不是1920px，就会出现横向滚动条。因为 #app 容器的宽度是固定的1920px。

第三步：初始化 autofit.js

在刚才的 <script> 标签里，添加初始化代码：

// 最简用法：传入设计稿宽高和容器选择器
autofit.init({
    designWidth: 1920,
    designHeight: 1080,
    renderdom: ‘#app‘, // 要缩放的容器
    resize: true // 是否监听窗口变化，默认为 true
});

刷新页面！神奇的事情发生了。无论你怎么调整浏览器窗口大小，整个 #app 容器里的内容都会等比例缩放，始终完整地显示在可视区域内，没有滚动条，布局比例也完全正确。

第四步：理解与调整配置

autofit.init() 接受一个配置对象，常用的配置如下：

参数	类型	默认值	说明
designWidth	Number	必填	设计稿的宽度（单位：px）
designHeight	Number	必填	设计稿的高度（单位：px）
renderDom	String/Element	‘#app‘	要应用缩放效果的DOM元素，可以是选择器字符串或DOM对象
resize	Boolean	true	是否监听窗口大小变化，重新缩放
ignore	Array	[]	一个数组，包含需要忽略缩放的元素选择器。这些元素将保持原始尺寸。
transition	Number	0	缩放过渡动画的持续时间（单位：秒），设为0则无动画
delay	Number	0	窗口变化后，延迟多少毫秒执行缩放计算（用于防抖）
limit	Number	0	缩放比例的下限，例如 0.5 表示最小缩放到设计稿的一半大小