vue移动端屏幕适配详解


Posted in Javascript onApril 30, 2019

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 './router'
import 'amfe-flexible'
import './utils/flex'
Vue.config.productionTip = false

new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

编写css处理方法

在src目录创建styles目录,同时在该目录新增common.scss文件,内容如下:

body,div,ul,ol,dl,li,dt,dd,h1,h2,h3,h4,p,form,iframe,input,textarea,a,span,em,strong,img,html,nav,header,article,button,footer,var {
 padding:0;
 margin:0;
}
body { font:12px/1.2rem "Microsoft YaHei",tahoma,arial,sans-serif;min-width:320px;position:relative; }
form,input {background:none;border:none;}
ul,dl,ol {list-style-type:none;}
h1, h2, h3, h4, h5 { font:12px/1.2rem "Microsoft YaHei",arial,tahoma; }
a { text-decoration:none; }
a:hover,a:focus { outline:none; }
table { border-collapse:collapse;border-spacing:0; }
img { border:none; }
strong,b { font-weight:normal; }
em,i,var { font-style:normal; }
p { text-indent:0; }
.clear { clear:both;height:0;line-height:0;overflow:hidden;width:0; }
.clearfix:after { clear:both;content:".";display:block;font-size:0;height:0;visibility:hidden; }
 // 尺寸转换
 @function px2rem($px, $base-font-size: 75px) { /*设计稿宽度为750,因此此处为75*/
 @if (unitless($px)) {
  @return px2rem($px + 0px); 
 } @else if (unit($px) == rem) {
  @return $px;
 }
 @return ($px / $base-font-size) * 1rem;
 }
 // 字体转换
 @mixin font-dpr($font-size) {
 font-size: $font-size;
 [data-dpr="2"] & {
  font-size: $font-size * 2;
 }
 [data-dpr="3"] & {
  font-size: $font-size * 3;
 }
 }

css内使用

<style scoped lang='scss'>
 @import '../styles/common.scss';
 .content{
  width:px2rem(750); /*750为设计稿实际尺寸*/
  font-size:px2rem(20) /*20为设计稿实际尺寸*/
</style>

js内使用

export default {
 name:'test',
 data() {
  return {
  w:0;
  }
 },
 watch:{
  getWidth() {
   this.w=this.$getPX(500);
  }
  }
 },
 computed: {
  fun() {
  return (this.w/this.$getPX(500)*100).toFixed(2) + '';
  }
 }
 }

以上所述是小编给大家介绍的vue移动端屏幕适配详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
jquery实现轮播图特效
Apr 12 jQuery
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 #Javascript
微信小程序时间戳转日期的详解
Apr 30 #Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 #Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 #Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 #Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 #Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 #Javascript
You might like
PHP ajax 分页类代码
2008/11/13 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
实例讲解python函数式编程
2014/06/09 Python
python实现基本进制转换的方法
2015/07/11 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
汉语言文学毕业生求职信
2013/10/01 职场文书
总经理办公室主任岗位职责
2013/11/12 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
高一军训的心得体会
2014/09/01 职场文书
迎新生标语大全
2014/10/06 职场文书
综治工作汇报材料
2014/10/27 职场文书
2016年春节慰问信息
2015/03/25 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
nginx请求限制配置方法
2021/07/09 Servers
Window server中安装Redis的超详细教程
2021/11/17 Redis
日元符号 ¥
2022/02/17 杂记