1. flexible.js
flexible 原理就是根据不同的屏幕宽度动态的设置网页中 html 根节点的 font-size，然后咱们将所有的 px 用 rem 来代替，这样就实现了不同大小的屏幕都适应相同的样式了。
GItHub地址
flexible 默认配置是将屏幕宽度分成 10 等份，如果需要自己手动修改可直接复制 index.js 的代码到本地使用，如果不需要修改，可直接使用 index.min.js 里已经压缩过的代码。
这里我需要将屏幕宽度改成等分 24 等份，所以使用 index.js 里未压缩的代码，方便自己修改:
(function flexible(window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1
// adjust body font size function setBodyFontSize() { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize();
// set 1rem = viewWidth / 10 function setRemUnit() { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' }
setRemUnit()
// reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function(e) { if (e.persisted) { setRemUnit() } })
// detect 0.5px supports if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) }}(window, document))
复制代码
这个代码就是仓库里 index.js 的代码，大家也可以直接复制这个代码去项目使用，针对我的需求将屏幕划分成 24 等份，只需修改：
// set 1rem = viewWidth / 24 此时把屏幕平均划分为24等分 function setRemUnit() { var rem = docEl.clientWidth / 24 docEl.style.fontSize = rem + 'px' }
复制代码
然后去项目里引用该 js 文件即可：
<script src="js路径"></script>
复制代码
然后配合 cssrem 使用
2. cssrem
下载 aaVScode 插件：
进入插件扩展设置进行配置：
这里我将基准改为了 80，对于 80 是怎么来的，是因为我是针对 1920px 的设计稿进行开发，并且将 flexible 手动修改了 24 等份，1920/24=80，所以这里我设置为了 80，具体设置可根据自己的需求以及 flexible 的配置进行修改。
然后在项目里使用时，该插件就会自动提示将 px 单位转为 rem 单位：
这里是说在我的配置下 200px 等于 2.5rem，然后我选择它使用 rem 单位即可==注意：不使用 rem 单位是无法进行可伸缩适配的==
这样下来项目就可以适配不同大小的屏幕了！
3. 案例展示：
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>echarts数据可视化</title> <script src="./js/echarts.min.js"></script> <!-- 利用flexible.js适配屏幕：flexible.js配置中我们将屏幕划分成了24等分 --> <script src="js/flexible.js"></script> <style> /* 屏幕宽度小于1024px后固定单位 因为项目配置是将屏幕划分成24等分，所以是1024/24=42.66 */ @media screen and (max-width:1024px) { html { font-size: 42.66px !important; } } /* 屏幕宽度大于1920px后固定单位 因为项目配置是将屏幕划分成24等分，所以是1920/24=80 */ @media screen and (min-width:1920px) { html { font-size: 80px !important; } } .box { width: 2.5rem; height: 2.5rem; background-color: pink; } </style></head>
<body> <div class="box"></div></body>
</html>
复制代码
评论