2021-07-08 自用js获取当时设备分辨率并是全局文字大小改变

下面展示一些 内联代码片。

vue组件代码

// An highlighted block

<script>
const c=()=>{
    // 获取分辨率
    let w = document.documentElement.clientWidth;
    // 设定当前文字大小
    let n =(16*(w/1920)>20?20+"px":(20*(w/1920)+"px"));
    document.documentElement.style.fontSize=n;
}
    window.addEventListener('load',c)
    window.addEventListener('resize',c)

export default {
 name:'Rem'
}
</script>



var foo = 'bar';

下面展示一些 内联代码片。

vue代码

// An highlighted block
<template>
<el-container>
    <el-aside  v-if="true">Aside</el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main
          <div class='div'>
            <div class='diva'>1</div>
            <div class='diva'>2</div>
            <div class='diva'>3</div>
          </div>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
  


</template>
<script>
// 引用组件自适应大小
import Rem from "../../components/Face/rem.vue"
Rem
export default {
  name: 'Home',
  components: {
    data(){
      return{

      }
    }

  }
}
</script>
<style src='../../../style/test4.css' >

</style>

下面展示一些 内联代码片。

css代码

// An highlighted block

.div{
    font-size: 1rem;
}