介绍
fit.css 是一个用于解决移动端 web 页面自适应布局问题的 npm 包，它可以让页面元素自适应手机屏幕大小，不需要写大量的媒体查询 CSS。它支持 CommonJS, AMD, ES6 import 和全局引入。
安装
fit.css 可以通过 npm 包管理工具进行安装。在项目目录下执行以下命令进行安装：
npm install fit.css
使用
引入样式表
在 HTML 页面的 head 标签中引入 fit.css 样式表，就可以使用其中的 CSS 类了。
<head> <link rel="stylesheet" href="./node_modules/fit.css/dist/fit.min.css" /> </head>
使用 CSS 选择器
在需要对元素进行自适应布局的 CSS 类名前加上 fw- 前缀，就可以使用以下类。其中数字代表元素在屏幕上所占的百分比的宽度。
-- -------------------- ---- ------- ------- -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ------ -- ----- --
例如，以下代码将元素自适应屏幕宽度的 50%：
<div class="fw-50"></div>
JavaScript 引入
如果需要在 JavaScript 代码中动态修改元素的自适应布局，可以使用 fit.js。
在 HTML 页面的 body 标签中引入 fit.js，就可以使用其中提供的 API 和方法了。
<body> <!-- 在 body 标签末尾引入 fit.js --> <script src="./node_modules/fit.css/dist/fit.min.js"></script> </body>
例如，以下代码在 JavaScript 中将元素自适应屏幕宽度的 60%：
var element = document.querySelector('.your-element-class');
fit(element, 60);示例代码
以下是一个简单的示例代码，展示了 fit.css 的使用效果。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ----------
----- ---------------- ---------------------------------------------- --
-------
---------- -
------ ----
------- - -----
----------------- --------
-
---- -
------- -----
----------- -----
----------------- --------
------ -----
----------- -------
------------ -----
----------- --- ---- -----
-
---------- -
----------------- --------
-
-- - --- ------- -------- --
------- -
-------------- -----
-
--------
-------
------
---- ------------------
---- ---- ----- ---
---- ---------- ------------------
---- --- ----- ---
---- ---------- ----------------
---- ---------- ----------------
---- --- ----- ---
---- ---------- ------------------
---- ---------- ------------------
---- ---------- ------------------
------
------- ------------------------------------------------------
-------
-------总结
通过使用 fit.css，我们可以轻松地使元素自适应于不同尺寸的屏幕上。它的使用方法简单明了，一旦掌握，就可以大大提高开发效率，同时也能使页面更加美观和易于浏览。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c581e8991b448e8e4c