前言：
上一篇文章我们介绍了BEM命名和stylus，这篇文章我们来介绍移动端适配。随着移动互联网的快速发展，移动端适配成为前端开发不可或缺的一环。在本文中，我们将深入探讨阿里的适配神器flexible.js以及一些移动端适配的实践经验。同时，我们将关注代码素养，通过一些优雅的设计模式和技巧，提升前端开发的质量和效率。
1. 移动端适配与flexible.js介绍：
移动端适配的核心是实现在不同设备上的页面显示一致性。阿里的适配神器flexible.js通过将html的font-size设为屏幕宽度的十分之一，以rem、vw、vh等相对单位替代px，实现了简单而有效的适配。
"g.tbcdn.cn/mtb/lib-fle…"这是阿里的适配神器链接，可以直接用script导入使用
接下来我们来手写这个代码，以下是一个flexible.js的基本实现：
(function () {
var width = document.documentElement.clientWidth;
var fontSize = width / 10
document.documentElement.style.fontSize = getfontsize() + 'px'
window.addEventListener('resize', function(){
var width = window.innerWidth; //获取浏览器宽度的另一种写法
var fontSize = width / 10;
document.documentElement.style.fontSize = getfontsize() + 'px';
})
})();
设计window监听是为了防止手机横屏，以便随时适配
2. 代码素养：设计模式与DOM性能优化：
观察一下上面的代码，其实你会发现很多问题，比如代码冗余，无法实现代码复用等，接下来我们一步一步来剖析，首先最明显的就是重复代码，基本上代码都是重复的，切记，DRY don't repeat yourself 不要写重复代码。其次就是document.documentElement执行了三遍，DOM编程性能开销非常大，可能你会觉得这能有多大，就这么几行代码而已，但如果是在大型商用软件上要执行几千次几万次呢？这就体现出我们的开发素养了，所以要从现在就开始培养，下面是优化后的代码：
(function() {
var htmlElement = document.documentElement //这样只需要查找一次，减少了开销
function getfontsize(){ //代码优化，封装成函数，以便复用
var width = htmlElement.clientWidth;
var fontSize = width / 10
return fontSize
}
htmlElement.style.fontSize = getfontsize() + 'px'
window.addEventListener('resize', function(){
htmlElement.style.fontSize = getfontsize() + 'px'
})
// html动态设置font-size
})()
3. 加强代码素养：Scripts标签的位置：
在HTML中，<script>标签的位置对页面性能有一定影响。通常，将<script>标签放在头部，确保在渲染页面之前加载并执行，一般放在css样式前面。然而，需要注意同步执行可能会阻塞HTML的下载进程。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="./base.js"></script>
<link rel="stylesheet" href="./common.css">
</head>
通过灵活运用移动端适配工具和提高代码素养，我们能够更高效地开发前端应用。适配神器flexible.js为移动端适配提供了简便而有效的解决方案，而优秀的代码素养则是高效团队协作和可维护性的基石。希望这些技术和实践能够帮助你在前端开发的道路上越走越远。
