本文是使用淘宝的方案进行布局开发的，遇到的问题是会对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. 移动端meta设置大全

    声明文档使用的字符编码:  <meta charset='utf-8'> 强制让文档与设备的宽度保持1:1,对页面设置不能进行缩放: <meta name="viewpor ...

  2. 数据结构中数组反转与STL库Algorithm中的reverse

    数组是个基本的线性数据结构,其实是内存中的一个块,我们可以通过c++的new来分配一个数组 int* a= new int[5]; 然后填数组的每个元素 a[0]=1; a[1]=2; a[2]=6; ...

  3. VMware ESXI6.0服务器安装系列：U盘安装问题汇总之网卡驱动安装

    本文转载至:http://blog.51cto.com/huanwenli/1749298 在给物理服务器安装ESXI的过程中经常会遇到网卡驱动问题,如果是买的是Dell.HP.IBM等厂商的服务器, ...

  4. 攻防世界(XCTF)WEB(进阶区)write up(四)

    ics-07  Web_php_include  Zhuanxv Web_python_template_injection ics-07 题前半部分是php弱类型 这段说当传入的id值浮点值不能为1 ...

  5. Python开发【第一篇】:目录

    本系列博文包含Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习Python编程的朋友们提供一点帮助! .Python开发[第一篇]:目录 .Python开发[第二篇]:初始P ...

  6. .NetCore——中小企业架构及通用权限管理系统开篇

    博客开通已经7年多了,也没写过什么东西,最近,突然想记录下自己的软件开发生涯,于是,找回账户,登录一看,还是当时还是在学校的时候学习的时候记录过一个sql批量到数据的Demo,近两年来,微服务架构火起 ...

  7. php是做前端的吗？

    php是做前端的吗 不是,php是后台脚本语言,由服务器执行. PHP即“超文本预处理器”,是一种通用开源脚本语言.PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言.PHP独特的语 ...

  8. 简单理解TCP通信的三次握手

    TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接. 位码(可以理解为请求状态): 有6种标示:SYN(synchronous建立联机) ACK(acknowledg ...

  9. python学习-类的继承

    1.继承的语法 2.多继承 3.override(子类重写父类的方法) 4.子类调用父类中被重写的实例方法 5.使用super函数调用父类的构造方法

  10. DM7的闪回功能及动态新能视图相关SQL总结

    DM7的闪回功能默认是关闭的,需要在dm.ini中设置参数: ENABLE_FLASHBACK = 1 UNDO_RETENTION = 900 意思为可以进行900s以内的闪回查询.下面是使用该功能 ...