本文是使用淘宝的方案进行布局开发的，遇到的问题是会对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. MySQL的索引原理（图解）

    数据库的索引原理 0.什么是索引 ​ 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.更通俗的说,数据库索引好比是一本书前面的目录,能 ...

  2. Redis开发与运维：数据迁移(下)

    上一篇,有朋友留言redis-port,借此机会我尝试使用一下redis-port这个同步工具 redis-port 已编译版 https://github.com/CodisLabs/redis-p ...

  3. jar包的多层级maven依赖的坑与正确传递方法

    这个问题简述起来就是项目加载jar包但是无法加载jar包的依赖 这是一个maven的特性吗? 问题发生前 程序猿经常自己写一些库实现或收集常用的逻辑方法(算法和设计模式等等),以方便多个项目使用,避免 ...

  4. [NOIp2014] luogu P2312 解方程

    题目描述 已知方程∑i=0naixi=0\sum_{i=0}^{n}{a_ix^i}=0i=0∑n​ai​xi=0求该方程在 [1,m][1,m][1,m] 内的整数解. Solution 有一个秦九 ...

  5. GSS3 - Can you answer these queries III

    题意翻译 nnn 个数, qqq 次操作 操作0 x y把 AxA_xAx​ 修改为 yyy 操作1 l r询问区间 [l,r][l, r][l,r] 的最大子段和 感谢 @Edgration 提供的 ...

  6. opencv::AKAZE检测与匹配

    AKAZE局部匹配 AKAZE局部匹配介绍 AOS 构造尺度空间 Hessian矩阵特征点检测 方向指定基于一阶微分图像 描述子生成 与SIFT.SUFR比较 更加稳定 非线性尺度空间 AKAZE速度 ...

  7. 关于vue使用的一些小经验

    这一年来说,vue的势头很猛,用户量“噌”“噌”“噌”的涨 为了不掉队不落伍.在后台大哥的胁迫下,不得不选择用了它 刚开始很难接受vue的写法,在编辑器里很容易报错,基本上每行都会出现红色的波浪线 这 ...

  8. Eureka error "java.net.UnknownHostException:

    spring cloud 中zuul智能路由,本地部署没有问题,部署到服务器就报com.netflix.zuul.exception.ZuulException: Forwarding error 项 ...

  9. C语言 二叉树的遍历（递归和非递归）

    #include <iostream> #include <cstdio> #include "biTree.h" #include "cstdl ...

  10. Andriod开发环境搭建

    一.相关安装文件准备