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 相关文章推荐
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
微信小程序sessionid不一致问题解决
Aug 30 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&amp;&amp;mysql)二
2006/10/09 PHP
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
php HTML无刷新提交表单
2016/04/05 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
js实现批量删除功能
2020/08/27 Javascript
virtualenv实现多个版本Python共存
2017/08/21 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
网络安全类面试题
2015/08/01 面试题
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
致标枪运动员加油稿
2014/02/15 职场文书
党员公开承诺书范文
2014/03/25 职场文书
作文批改评语大全
2014/04/23 职场文书
小学生安全演讲稿
2014/04/25 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
一起来学习Python的元组和列表
2022/03/13 Python