本文是使用淘宝的方案进行布局开发的，遇到的问题是会对app内使用的第三方插件，当页面进行缩放后，比如高德地图中的文字会显得过小，我使用的方法就是手动的动每一个尺寸进行手动的px 到 rem的替换，而不是用的px2remLoader，webpack中使用px2remLoader后会全局的对px进行转换，本人并未找到可以对指定的数据进行转换的参数，下面是我使用淘宝lib-flexible的整个流程。

一、安装【lib-flexible】

npm install lib-flexible --save

并在main.js页面引入

import 'lib-flexible';

二、模板页面【index.html】

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">/*如果页面未引入第三方组件【比如地图组件】建议不写，让lib-flexible自动计算*/

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>document</title>

 </head>

 <body>

     <div id="app"></div>

     <!-- built files will be auto injected -->

 </body>

 </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自适应方案的更多相关文章

  1. Vue单页面骨架屏实践

    github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...

  2. 处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...

  3. vue单页面打包文件大？首次加载慢？按需加载？是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  4. [转] 2017-11-20 发布 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  5. 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  6. Vue 单页面应用 SEO SPA single page application advantages and disadvantages

    处理 Vue 单页面应用 SEO 的另一种思路 - muwoo - 博客园 https://www.cnblogs.com/tiedaweishao/p/7493971.html SPA网站SEO完美 ...

  7. 关于处理移动端Vue单页面及其内嵌兼容问题

    关于处理移动端Vue单页面及其内嵌兼容问题 question:由于最近转移了以前的H5项目,重构使用Vue单页面,导致部分手机内嵌或在微信浏览器中无法浏览,或者无法使用ajax请求:手机机型千变万化, ...

  8. vue单页面应用中动态修改title

    https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...

  9. 处理 Vue 单页面 SEO 的另一种思路

    vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender- ...

随机推荐

  1. A-03 牛顿法和拟牛顿法

    目录 牛顿法和拟牛顿法 一.牛顿法详解 1.1 无约束最优化问题 1.2 牛顿法迭代公式 1.3 牛顿法和梯度下降法 二.牛顿法流程 2.1 输入 2.2 输出 2.3 流程 三.拟牛顿法简介 更新. ...

  2. 局部敏感哈希LSH（Locality-Sensitive Hashing）——海量数据相似性查找技术

    一. 前言     最近在工作中需要对海量数据进行相似性查找,即对微博全量用户进行关注相似度计算,计算得到每个用户关注相似度最高的TOP-N个用户,首先想到的是利用简单的协同过滤,先定义相似性度量(c ...

  3. WPF编程，C#中对话框自动关闭的一种方法(转载)

    本文原文链接:https://blog.csdn.net/qq_43307934/article/details/84933196———————————————— MessageBoxTimeout是 ...

  4. Flask中的flash

    一.简单的使用 - 必须要设置秘钥因为flash是基于session -设置:flash('aaa') -取值:get_flashed_message() #从源码我们可以看出get_flashed_ ...

  5. postman参数化

    1.新建csv文件 2.csv文件中输入变量名和参数 3.postman中新增接口,并设置变量 4.选择进入 5.导入参数化csv格式文件,点击run 查看运行结果

  6. 修改配置文件application.properties

    附录A.常用应用程序属性 可以在application.properties文件内部application.yml,文件内部或命令行开关中指定各种属性.本附录提供了常见Spring Boot属性的列表 ...

  7. 研究了3天，终于将 Shader 移植到 Cocos Creator 2.2.0 上了！

    预览 扫光特效-Fluxay2 马赛克像素特效-Mosaic 过渡效果-Transfer Shawn 花了3天时间,研究了Cocos Creator 2.2.0 的 Effect 语法,终于在1024 ...

  8. windows与office激活

    暴风官网:www.baofengjihuo.com

  9. 最优解的lingo和MATLAB解法

    最近运筹学学了线性规划和单纯形法,然后老师讲到了运用lingo和MATLAB软件分别求解的方法 首先,我们来讲讲lingo的(小技巧,只要把鼠标滑轮固定在输入界面按ctrl就可以放大了) lingo比 ...

  10. python-写入文件

    一.写入空文件(覆盖) # coding=UTF-8 filename = 'test_text.txt' with open(filename, 'w') as file_object: file_ ...