vue项目——jq实现页面自适应——基础积累（jq版本+vue版本）_jquery前端页面自适应解决办法

之前写过一篇文章echarts——实现面积图+柱状图+折线图等——基础积累

echarts——实现面积图+柱状图+折线图等——基础积累:http://t.csdn.cn/rNmjd

里面有关于页面自适应的功能：

这个是jq版本

$(function () {
  screenSize('.pageBody');
});
function screenSize(editorDom) {
  let screenWidth = $(window).width();
  let screenHeight = $(window).height();
  let defWidth = 1920;
  let defHeight = 1080;
  let xScale = screenWidth / defWidth;
  let yScale = screenHeight / defHeight;
  $(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')');
  $(window).resize(function () {
    let screenWidth = $(window).width();
    let screenHeight = $(window).height();
    xScale = screenWidth / defWidth;
    yScale = screenHeight / defHeight;
    $(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')');
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

css部分

 .pageBody {
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0 0;
    overflow: hidden;
    padding-top: 80px;
}
1
2
3
4
5
6
7

如果是vue版本，则需要用下面的方式来处理

1.安装jq插件

npm install jquery --save

2.vue.config.js中加入以下内容——chainWebpack

在chainWebpack中加入下面的内容

chainWebpack:(config)=>{
	config.plugin('provide').use(webpack.ProvidePlugin, [
	  {
	    $: 'jquery',
	    jquery: 'jquery',
	    jQuery: 'jquery',
	    'window.jQuery': 'jquery',
	  },
	]);	
}
1
2
3
4
5
6
7
8
9
10

3.页面中引入——import $ from 'jquery';

4.封装的自适应方法如下：

screenSize(editorDom) {
  let screenWidth = $(window).width();
  let screenHeight = $(window).height();
  let defWidth = 1920;
  let defHeight = 940;
  let xScale = screenWidth / defWidth;
  let yScale = screenHeight / defHeight;
  $(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')');
  $(window).resize(() => {
    let screenWidth = $(window).width();
    let screenHeight = $(window).height();
    xScale = screenWidth / defWidth;
    yScale = screenHeight / defHeight;
    $(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')');
  });
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5.自适应方法的调用

mounted() {
	this.screenSize('.pageBody');
},
1
2
3

6.html代码

<template>
  <div style="height: 100vh; overflow: hidden">
    <div class="pageBody newPageBody">
    //页面内容
    </div>
  </div>
</template>
1
2
3
4
5
6
7

7.css部分

 .pageBody {
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0 0;
    overflow: hidden;
    padding-top: 80px;
}
1
2
3
4
5
6
7

完成！！！多多积累，多多收获！！！