本文是使用淘宝的方案进行布局开发的，遇到的问题是会对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. salt-api 配置使用

    salt-api 安装  配置源 (系统环境s示例是centos6) epel 源 rpm -Uvh https://mirrors.tuna.tsinghua.edu.cn/epel/6/i386/ ...

  2. B-概率论-贝叶斯决策

    目录 贝叶斯决策 一.贝叶斯决策理论 二.贝叶斯公式 2.1 从条件概率公式推导贝叶斯公式 2.2 从全概率公式推导贝叶斯公式 三.贝叶斯公式应用 更新.更全的<机器学习>的更新网站,更有 ...

  3. [AI开发]视频结构化类应用的局限性

    算法不是通用的,基于深度学习的应用系统不但做不到通用,即使对于同一类业务场景,还需要为每个场景做定制.特殊处理,这样才能有可能到达实用标准.这种局限性在计算机视觉领域的应用中表现得尤其突出,本文介绍基 ...

  4. Mybatis入门简版（补充）

    一.Mybatis 中$与#的区别 #相当于对数据 加上 双引号,$相当于直接显示数据 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#, ...

  5. django创建表单以及表单数据类型和属性

    08.15自我总结 关于django的表单不同关系之间的创建 一.不同关系之间的创建 1.一对一 举例 母表:userinfo id name age 1 张三 12 2 李四 58 字表:priva ...

  6. 快速傅里叶变换（FFT）略解

    前言 如果我们能用一种时间上比 \(O(n^2)\) 更优秀的方法来计算大整数(函数)的乘法,那就好了.快速傅里叶变换(FFT) 可以帮我们在 \(O(n\log n)\) 的时间内解决问题. 函数乘 ...

  7. 神奇的 SQL 之团结的力量 → JOIN

    前言 开心一刻   闺蜜家暴富,买了一栋大别野,喊我去吃饭,菜挺丰盛的,筷子有些不给力,银筷子,好重,我说换个竹子的,闺蜜说,这种银筷子我家总共才五双,只有贵宾才能用~我咬着牙享受着贵宾待遇,终于,在 ...

  8. Azure DevOps 替换 appsettings 解决方案

    之前发布了 <.Net Core DevOps -免费用Azure四步实现自动化发布(CI/CD)>之后,有很多朋友私信我说如何替换 appsettings 里面的 ConnectionS ...

  9. GC 知识点补充——CMS

    之前已经讲过了不少有关 GC 的内容,今天准备将之前没有细讲的部分进行补充,首先要提到的就是垃圾收集器. 基础的回收方式有三种:清除.压缩.复制,衍生出来的垃圾收集器有: Serial 收集器 新生代 ...

  10. os模块/sys模块/json/pickle模块/logging模块(day16整理)

    目录 今日内容 os模块 对文件操作 对文件夹此操作 辅助性的 了解 sys模块 json和pickle模块 json模块 pickle模块 logging模块 日志级别 添加设置 自定义配置 今日内 ...