现在我们移动端屏幕适配，我用的是rem，之前也有看到说有一个felxable.js的库，后来去查，说是有更好的作者放弃了，并且给我们提供了链接，哈哈哈哈真的太可爱了。准备抽时间去仔细看看，公司下一个项目又来了，真的加班了好久，为了如期完成项目，完成之后立马就新开项目，有点心累，这把应该是APP了，完全没有任何经验，嗷嗷只能硬着头皮做，还是要恰饭的，可怜的应届狗不敢造次。
下面分享一下rem适配的代码：
//默认调用一次设置 setHtmlFontSize(); function setHtmlFontSize() { // 1. 获取当前屏幕的宽度 var windowWidth = document.documentElement.offsetWidth; // console.log(windowWidth); // 2. 定义标准屏幕宽度 假设375 var standardWidth = 375; // 3. 定义标准屏幕的根元素字体大小 假设100px 1rem=100px 10px = 0.1rem 1px 0.01rem var standardFontSize = 100; // 4. 计算当前屏幕对应的根元素字体大小 var nowFontSize = windowWidth / standardWidth * standardFontSize + 'px'; // console.log(nowFontSize); // 5. 把当前计算的根元素的字体大小设置到html上 document.querySelector('html').style.fontSize = nowFontSize; } // 6. 添加一个屏幕宽度变化的事件 屏幕变化就触发变化根元素字体大小计算的js window.addEventListener('resize', setHtmlFontSize);
把这段代码引入到main.js里面，然后使用转换器把px转成rem 就可以了。
7.其他问题汇总
点击事件点击多次只执行一次：
可以使用.once修饰符 还有很多有用的修饰符，大家有时间可以去看看~~
使用ios输入框的时候，键盘弹起来回遮挡下面的按钮等元素的事件：
我们可以给input注册一个失去焦点事件，当失去焦点的时候设置document.body.scroolTop = 0;
打包项目遇到静态资源不展示的现象或者是路径错误：
我用的是vue-cil3，他把配置文件都放在了node_modules中，官方文档上面有介绍，如果需要修改配置，
就新建一个vue.config.js文件，他会自动的覆盖之前的文件。主要是修改成： publicPath: "./"，
文档已经没有baseUrl，现在全部使用publicPath,跟着文档配置就ok了。
结尾：
我遇到的问题大致就这些，因为项目比较小，所以没有遇到太多问题。过程真的有点心酸，我独立解决问题的能力真的很一般，不知道是不是没有做程序员的潜质，出现问题就很焦虑，解决了一段时间以后，还是没有办法，就会更加焦虑。在上家公司实习的时候，我们组长指出来这个问题以后，我真的反省了好久。现在这家公司还是在实习，但是前端就一个人，小姐姐人很好，但是不用vue框架，所以遇到问题还是得单独解决。前端小姐姐是很坚韧的人，遇到问题，真的是一个一个线索的去找，不放弃那种，一开始我们要用flutter，我环境搭建搞了好久，最后是小姐姐陪我搞好的。真的走到那里都是学习的过程。我觉得坚毅真的是世界上特别珍贵的品质，渴望拥有!!!
您可能感兴趣的文章: