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 相关文章推荐
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 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
关于页面优化和伪静态
2009/10/11 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
vue下跨域设置的相关介绍
2017/08/26 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
python机器人行走步数问题的解决
2018/01/29 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
由面试题加深对Django的认识理解
2019/07/19 Python
python随机数分布random均匀分布实例
2019/11/27 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
入党转预备思想汇报
2014/01/07 职场文书
自我鉴定书
2014/03/24 职场文书
会计求职信范文
2014/05/24 职场文书
党员自我剖析材料
2014/08/31 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
行政复议答复书
2015/07/01 职场文书
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python