【门户网站】自适应屏幕尺寸

根据不同屏幕尺寸，分别显示不同屏幕尺寸下元素大小等...

1、引入 jquery

yarn add jquery -D

2、在 src/utils下创建calcute.js

import $ from 'jquery'
export function calcuteSize() {
  let currentWidth = null;
  let currentHeight = null;
  window.addEventListener("resize", function () {
    let event = null;
    let currentHTML = $("html");
    let resizeFun = function onResize() {
      let w = window.innerWidth;
      let h = window.innerHeight;
      i >= 1440 ?
        (
          currentHTML.removeClass('mini_container'),
          currentHTML.addClass('normal_container')
        )
        :
        (
          currentHTML.removeClass('normal_container'),
          currentHTML.addClass('mini_container')
        ),
        currentWidth === w && currentHeight === r || (event && window.clearTimeout(event)),
        event = window.setTimeout(onResize, 100),
        currentWidth = i,
        currentHeight = r;
    }
    return resizeFun(), resizeFun
  }())
}

3、main.js中引入

import { calcuteSize } from '@/utils/calcute'

calcuteSize()

4、创建index.less文件，并引入到App.vue中

// App.vue
<style lang="less">
@import './style/index.less'
</style>

// ndex.less
@charset 'utf-8'
w1200{
  width: 1200px;
  margin: auto;
}

.mini_container{
  w1200{
    width: 1000px;
    margin: auto;
  }
}

5、运用

<template>
  <div class="wrapper w1200">
    <div class=""></div>
  </div>
</template>

<style lang="less" scoped>
// 在小尺寸下的样式
.mini_container {
  .wrapper {
    padding: calc(100px / 1.2);
  }
}
</style>