vue 单页面应用 app自适应方案
Posted 漸行漸遠
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 单页面应用 app自适应方案相关的知识，希望对你有一定的参考价值。
本文是使用淘宝的方案进行布局开发的，遇到的问题是会对app内使用的第三方插件，当页面进行缩放后，比如高德地图中的文字会显得过小，我使用的方法就是手动的动每一个尺寸进行手动的px 到 rem的替换，而不是用的px2remLoader，webpack中使用px2remLoader后会全局的对px进行转换，本人并未找到可以对指定的数据进行转换的参数，下面是我使用淘宝lib-flexible的整个流程。
一、安装【lib-flexible】
npm install lib-flexible --save
并在main.js页面引入
import \'lib-flexible\';
二、模板页面【index.html】
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">/*如果页面未引入第三方组件【比如地图组件】建议不写，让lib-flexible自动计算*/ 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>document</title> 9 </head> 10 11 <body> 12 <div id="app"></div> 13 <!-- built files will be auto injected --> 14 </body> 15 16 </html>
三、设计图上的尺寸手动转化为rem
根据设计图尺寸我们可以将1rem设置为固定的PX数作为基准，可参考http://www.cnblogs.com/lyzg/p/5058356.html
根据基准值我们再手动去计算，我这里用的是atom编辑器，px2rem-plus插件，可以自己设置基准值，然后它会自动帮你计算并进行注释
顺便介绍个sublime text3 的一个叫CSSREM的插件，可快速将px转化为rem.这个插件是由@正霖编写.下载地址：https://github.com/flashlizi/cssrem .
四、然后就可以愉快的开发了
只是这个方法比较笨，如果px2remLoader可以自动设置注释只使注释的尺寸转换的话就会方便许多，也应该有其他的方法，希望以后能再学习
以上是关于vue 单页面应用 app自适应方案的主要内容，如果未能解决你的问题，请参考以下文章