vue前端项目基于淘宝lib-flexible做手机端适配

项目中引入lib-flexible插件

1、通过npm命令导入

1）在命令窗口进入项目目录执行：npm install lib-flexible --save

2）在项目的main.js中引入lib-flexible：import 'lib-flexible'

2、修改meta属性

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

具体属性值如下：

width：设置layout viewport的宽度,可以为一个正整数，也可以设置为device-width表示取当前设备的宽度，rem会根据此宽度做适配所以通过此宽度计算px转换为rem后的值，例如：假如屏幕默认宽度为750px，flexible默认将屏幕分为100份，1rem=10份，换算下来铺满屏幕需要10rem那么750px就等于10rem，所以rem的换算比例为750/10=75，那么设置一个字体的font-size=15px时转换为rem就为0.2rem。

initial-scale：设置页面的初始缩放值，为一个数字，可以带小数点

minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数点，因为这里我禁掉了缩放所以没有使用该属性

maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数点，因为这里我禁掉了缩放所以没有使用该属性

height：设置layout viewport的高度，这个属性很少使用

user-scalable：是否允许用户进行缩放，“no”为不允许，“yes”为允许，应为浏览器默认会将页面放大所以这里禁止缩放

3、需要注意的点

一般ui设计人员的设计稿都基于640px和750px宽度为准，所以当默认宽度为750px时，px换算为rem的基数为75，至于为什么为640px和750px可以参考文章：https://www.jianshu.com/p/07669cb3e7c5

4、px自动转换为rem

可以通过webpack 的 px2rem-loader,自动将px转换为rem，这里还没有做过尝试，先在此做个记录。

vue前端项目基于淘宝lib-flexible做手机端适配相关推荐

cmd搭建vue前端项目详细过程
cmd 搭建vue前端项目下载nods.js node.js下载(Windows版本) next 安装完毕! 配置node.js环境变量进入找到Path进入这里填你的node.js的安装路径验 ...
阿里开源首个移动AI项目，淘宝同款推理引擎
乾明发自凹非寺量子位报道 | 公众号 QbitAI 淘宝上用的移动AI技术,你也可以用在自己的产品中了. 刚刚,阿里巴巴宣布,开源自家轻量级的深度神经网络推理引擎MNN(Mobile Neu ...
手机淘宝的flexible设计与实现
手机淘宝的flexible设计与实现寒冬winter 发布在像winter一样冷2015年8月7日view:70095HTML5CSSCSS3移动开发在文章任何区域双击击即可给文章添加[评注]!浮 ...
VUE项目学习（一）：搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
Vue前端项目自适应布局
Vue前端项目自适应布局一.单位尺寸二.基于rem实现自适应布局一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:"root em" ...
基于淘宝评价的采集与产品爆款挖掘分析
基于淘宝评价的采集与产品爆款挖掘分析知已知彼,方能百战不殆.在已经成熟的电商环境中尤是如此.无论您是从事公司企业店铺的运营专家,还是从事个人店铺的打理.了解对手行业.了解同行最受欢迎的产品,是必须的 ...
雅虎统计 chedong.com 读者基于淘宝购物行为的访客网购兴趣分析
2月份雅虎统计推出了一个新功能:访客网购兴趣,估计是基于用户的淘宝用户行为做的分析,数据好像不是每天更新,近期刚更新过. 本网站最适合用户人群: 类型购买比例相对平均差异车载MP3/视听 2.6 ...
vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包扔服务器 one 前期准备首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...
Vue前端项目【尚品汇】
Vue前端项目[尚品汇] 1. 说明 2. 对项目创建 3.结构 4. 项目运行起来时,浏览器自动打开 5.关闭ESLint校验功能 5.路由分析 6.路由元信息 7. 路由传参 7.1 路由的跳转方 ...

vue前端项目基于淘宝lib-flexible做手机端适配

项目中引入lib-flexible插件

vue前端项目基于淘宝lib-flexible做手机端适配相关推荐

最新文章

热门文章