flexible
vue移动端屏幕适配,查看项目地址
效果预览
# 项目clone
git clone git@github.com:NicolasGui/flexible.git
# 进入项目目录
cd flexible
# 安装依赖
npm install
# 启动服务 localhost:8080
npm run dev
原理概述
插件安装
# 插件一:amfe-flexible
npm install amfe-flexible --save
# 插件二: node-sass
npm install amfe-flexible --save # 同时,在main.js文件内引入
npm install sass-loader --save
编写js处理方法
在utils目录下创建flex.js文件,内容如下:
import Vue from 'vue'
Vue.prototype.$setTitle = function (text) {
document.title = text
}
Vue.prototype.$getPX = function (design, designWidth = 750) {
// 750为设计稿宽度
// 获取窗口尺寸
let width = document.documentElement.getBoundingClientRect().width
// 计算缩放比例
let scale = width / designWidth
// 获取实时尺寸
return design * scale
}
同时,在main.js文件内引入该js文件
import Vue from 'vue'
import App from './App'
import router from