vue 单页面应用 app自适应方案
本文是使用淘宝的方案进行布局开发的，遇到的问题是会对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自适应方案的更多相关文章
- Vue单页面骨架屏实践
github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
- vue单页面打包文件大？首次加载慢？按需加载？是你打开方式不对
部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...
- [转] 2017-11-20 发布 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- Vue 单页面应用 SEO SPA single page application advantages and disadvantages
处理 Vue 单页面应用 SEO 的另一种思路 - muwoo - 博客园 https://www.cnblogs.com/tiedaweishao/p/7493971.html SPA网站SEO完美 ...
- 关于处理移动端Vue单页面及其内嵌兼容问题
关于处理移动端Vue单页面及其内嵌兼容问题 question:由于最近转移了以前的H5项目,重构使用Vue单页面,导致部分手机内嵌或在微信浏览器中无法浏览,或者无法使用ajax请求:手机机型千变万化, ...
- vue单页面应用中动态修改title
https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...
- 处理 Vue 单页面 SEO 的另一种思路
vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender- ...
随机推荐
- python编程基础之十八
字符串的查找和替换常用函数: str.count(sub,start = 0,end = len(str)) 计算sub 在str中出现的次数,[start,end)寻找区间 str.find(str ...
- Java BIO及实现
发现日常学习过的知识不久就会遗忘,在此只是整理并记录一下学习笔记,做个回忆,并方便以后查阅,若有错误,欢迎指正 网络模型:TCP/IP网络模型是从OSI七层模型中演化来的,osi模型分为物理层,数据链 ...
- requests模块(代理)篇
- 用户验证 - 代理验证 #可能需要使用HTTP basic Auth, 可以这样 # 格式为 用户名:密码@代理地址:端口地址 proxy = { "http": " ...
- navicat for mysql ；连接数据库报错1251，解决办法。
转载 改密码方式:用管理员身份打开cmd mysql -uroot -p(输入密码) 进入mysql执行下面三个命令 use mysql: ALTER USER 'root'@' ...
- C# .Net Framework
.NET Framework概述 .NET Framework是由微软开发,一个致力于敏捷软件开发.快速应用开发.平台无关性和网络透明化的软件开发平台. .NET Framework组成 .NET F ...
- Neo4j:图数据库GraphDB(三)创建删除及高级操作
本片继续前几篇介绍图数据库的创建,有疑问可以我的看看前两篇文章:http://www.cnblogs.com/rongyux/p/5537206.html 四 图数据库的创建 1 创建一个节点 P ...
- 数据挖掘：python数据清洗cvs里面带中文字符
数据清洗,使用python数据清洗cvs里面带中文字符,意图是用字典对应中文字符,即key值是中文字符,value值是index,自增即可:利用字典数据结构没有重复key值的特性,把中文字符映射到了数 ...
- [TYVJ2340] 送礼物 - 双向搜索
题目限制 时间限制 内存限制 评测方式 题目来源 1000ms 131072KiB 标准比较器 Local 题目描述 作为惩罚,GY被遣送去帮助某神牛给女生送礼物(GY:貌似是个好差事)但是在GY看到 ...
- MySQL常用sql语句-----数据表的查询操作
常用的sql语句如下,应对工作足以 1.查询指定字段 select c_id,c_age,c_name from t_student; select c_id as 编号,c_name as 姓名,c ...
- （转载）linux命令-sed
原文地址:https://www.cnblogs.com/zhangzongjian/p/10708222.html