本文是使用淘宝的方案进行布局开发的，遇到的问题是会对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. 重载operator new delete函数

    可以重载global的operator new delete 函数,细节如下: MyNewDelete.h #pragma once #include <stdlib.h> #includ ...

  2. redis缓存+session 实现单点登录

    一.单点登录介绍 单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系 ...

  3. EF通过导航属性取出从表的集合后，无法删除子表

    主从表是配了级联删除的,如果通过导航属性去除从表明细删除时将报错The relationship could not be changed because one or more of the for ...

  4. socat的介绍与使用

    Socat 是 Linux 下的一个多功能的网络工具,名字来由是 「Socket CAT」.其功能与有瑞士军刀之称的 Netcat 类似,可以看做是 Netcat 的加强版. Socat 的主要特点就 ...

  5. 爬虫3：html页面+webdriver模块+demo

    保密性好的网站,不能使用request请求页面信息,这样可以使用webdriver模块先开启一个浏览器,然后爬去信息,甚至还可以click等操作对页面操作,再爬取. demo 一般流程: 1)包含se ...

  6. ndnsim结果分析

    ndnSIM中提供了几种trace用来对仿真结果进行跟踪,生成数据文件txt 官网地址: https://ndnsim.net/current/metric.html#packet-trace-hel ...

  7. QuartzCode快速开发动画代码工具

    QuartzCode快速开发动画代码工具 QuartzCode一款快速,轻量,强大的动画工具,可快速得到原生的ObjC/Siwft代码 我可以用QuartzCode做什么? 应用程序演练动画 动画菜单 ...

  8. 13.Linux文件查找-find命令

    find 命令的基本语法如下: 命令 路径 选项 表达式 动作 find [path...] [options] [expression] [action] 查找 地区 妹纸 18-25岁 约? (1 ...

  9. ESP8266开发之旅 网络篇② ESP8266 工作模式与ESP8266WiFi库

        在网络篇①中,博主主要讲解了Arduino上开发ESP8266的插件库 Arduino Core For ESP8266.但是,并没有讲到关于这个模块的工作模式,所以本篇讲着重讲解ESP826 ...

  10. centos 7.6修改ssh端口，设置防火墙规则

    一.修改ssh端口 1 使用 root 用户进入 /etc/ssh目录 2 备份ssh配置文件 cp sshd_config sshd_config-bak 3 使用 vim 打开 sshd_conf ...