flexible-screen

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Customize configuration

See Configuration Reference.

use it

let it‘s son width and height to 100% and that is the template

<template>
  <div class="about">
    <Container :options="{ width: 3840, height: 2160 }">
    <div class="flexable">
      我可以自适应
    </div>
    </Container>
  </div>
  
</template>
<script>
import Container from "flexible-screen";
export default {

  data(){
    return {

    }
  },
    components: {
    Container,
  },
}
</script>
<style scoped>
.flexable {
  width: 1920px;
  height: 1080px;
  background: blueviolet;
}
.about {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>