flexible.js的使用

何程龙

已于 2023-07-24 11:23:06 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

于 2023-07-24 11:14:28 首次发布

本文链接：https://blog.csdn.net/qq_44034384/article/details/131891854

flexible.js是一个用于内容自适应屏幕尺寸的JavaScript插件，通过调整HTML根元素的font-size来实现响应式设计。rem是一个相对单位，基于HTML根元素的大小，允许统一调整所有字体大小。安装flexible.js可以通过GitHub或npm，然后在HTML中引入。为了设置1rem等于80px，需修改flexible.js的相应值，并在VSCode中使用cssrem插件辅助px到rem的转换，调整插件设置以匹配所需根字体大小。如果需要，可能需要重启VSCode使更改生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flexible.js是用来使内容适应屏幕大小的插件。

rem，是相对单位，是相对HTML根元素，可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

1、安装

github下载地址：https://github.com/amfe/lib-flexible

在这里插入图片描述
或：

npm i -S amfe-flexible

2、导入

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>