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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
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 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中字典映射类型的学习教程
2015/08/20 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
最新自我评价范文
2013/11/16 职场文书
软件工程师岗位职责
2013/11/16 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL