什么是 lm-flexible
lm-flexible 是一款基于 rem 单位的自适应移动端布局方案，在实现适配的基础上还能实现自动判断手机屏幕宽度并引用对应的 rem 值，大大提高了开发效率。
如何使用 lm-flexible
安装
在终端命令行中输入以下 npm 命令即可完成安装：
npm install lm-flexible --save
使用
在 html 文件头部引入 lm-flexible 的 js 文件。
<script src="node_modules/lm-flexible/dist/flexible.js"></script>
设置 rem 基准值和屏幕最大宽度。在引入 lm-flexible 的 js 文件后，在底部加入以下代码：
<script> lmFlexible({ maxScreenWidth: 750, // 可设置自己的最大宽度 fontBase: 16 // 可根据设计稿的尺寸调整基准值，一般16即可 }); </script>写样式时将长度单位 rem 替换为 px，字体大小不需替换。
.box { width: 3.75rem; // 375/100 = 3.75 也就是 375 是设计稿的宽度，100 是最大屏幕宽度所设置的默认字号（1rem = 100px） font-size: 0.32rem; // 不需替换 line-height: 0.5rem; // 不需替换 }
使用场景
lm-flexible 适用于移动端布局从而提高开发效率，在项目开发中普遍应用。
示例代码
/* example.css */
.box {
width: 3.75rem; // 375/100 = 3.75 也就是 375 是设计稿的宽度，100 是最大屏幕宽度所设置的默认字号（1rem = 100px）
font-size: 0.32rem; // 不需替换
line-height: 0.5rem; // 不需替换
}-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ------ --------------- ---------------------------- ------------------- --------------------------- ----- -- ----------- -- -- --- -------- --------------------------------------------------------- - -------- ---- -- ----------- ---- -- --------- --------------------- --------- --------- ---- -- ---------- ----- -------------- ------------ --- --------------------- ----- ---------- ------- ------ ----- ----------------- ------------ ------- -------
综上，lm-flexible 作为一款移动端布局的利器，能够为我们省去许多繁琐的计算和代码编写，极大地提高了开发效率，是前端开发中必不可少的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626281e8991b448dfa84