自适应的屏幕 lib-flexible 和 v-scale-screen

首先是要安装

npm install lib-flexible --save

然后在 修改

 这个根据设计稿的大小来计算  这个是 把屏幕设计成24份  1920/24  80px=1rem

1.  
    
2.  
   function refreshRem(){
3.  
   var width = docEl.getBoundingClientRect().width;
4.  
   if (width / dpr > 1920) {
5.  
   width = 1920 * dpr;
6.  
   }
7.  
   var rem = width / 24;
8.  
   docEl.style.fontSize = rem 'px';
9.  
   flexible.rem = win.rem = rem;
10.  
    }

一定要引入啊

1.  
   // px2rem 自适应
2.  
   import 'lib-flexible'

然后在软件中安装插件

 随后在设置中

这个 80 是  上面设计稿出来的结果 根据自己的需要来写啊 

第二种是 v-scale-screen

首先是 安装 

根据自己的vue版本 来安装不同的 v-scale-screen的版本

vue2请使用1.x版本、vue2请使用1.x版本、vue2请使用1.x版本，重要的事情说三遍

注：使用时请将 body 样式设置为 overflow: hidden; 注：使用时请将 body 样式设置为 overflow: hidden; 注：使用时请将 body 样式设置为 overflow: hidden;

例如  安装： 我安装的是  vue2 的啊

npm i v-scale-screen@1.0.2 

使用

1.  
   // main.js
2.  
   import Vue from "vue";
3.  
   import VScaleScreen from 'v-scale-screen'
4.  
    
5.  
   Vue.use(VScaleScreen)

上面是代码可以直接复制 下面是图片

使用的地方如下

1.  
   <template>
2.  
   <!-- width="1920" height="1080" 可写可不写额 -->
3.  
   <v-scale-screen fullScreen width="1920" height="1080" >
4.  
   <div class="a">
5.  
   <div class="c"></div>
6.  
   </div>
7.  
   <div class="b"></div>
8.  
   </v-scale-screen>
9.  
   </template>
10.  
     
11.  
    <script>
12.  
     
13.  
    export default {
14.  
    data() {
15.  
    return {
16.  
     
17.  
    };
18.  
    },
19.  
    mounted() {
20.  
    },
21.  
    methods: {},
22.  
    };
23.  
    </script>
24.  
    <style lang="less" scoped>
25.  
    .a {
26.  
    width: 540px;
27.  
    height: 540px;
28.  
    background-color: red;
29.  
    display: flex;
30.  
    justify-content: center;
31.  
    align-items: center;
32.  
    }
33.  
    .b {
34.  
    width: 540px;
35.  
    height: 540px;
36.  
    background-color: rgb(24, 20, 228);
37.  
    }
38.  
    .c {
39.  
    width: 400px;
40.  
    height: 200px;
41.  
    background: rebeccapurple;
42.  
    }
43.  
    </style>

api：

最重要的一点 记得这个标签

1.  
   <v-scale-screen >
2.  
   <div class="a">
3.  
   <div class="c"></div>
4.  
   </div>
5.  
   <div class="b"></div>
6.  
   </v-scale-screen>

另外还是有样式的调整 在公共的位置

1.  
   * {
2.  
   margin: 0;
3.  
   padding: 0;
4.  
   }
5.  
   body {
6.  
   overflow: hidden;
7.  
   }
8.  
   .screen-box {
9.  
   background: #fff !important;
10.  
    }
11.  
    .screen-wrapper{
12.  
    margin: 0 !important;
13.  
    }

具体的位置在

 再页面上的显示效果

100%

 50%

 125%

 vue3的用法

Vue3

我们在vue3中以组件方式导出

1.  
   <template>
2.  
   <v-scale-screen width="1920" height="1080">
3.  
   <div>
4.  
   <v-chart>....</v-chart>
5.  
   <v-chart>....</v-chart>
6.  
   <v-chart>....</v-chart>
7.  
   <v-chart>....</v-chart>
8.  
   <v-chart>....</v-chart>
9.  
   </div>
10.  
    </v-scale-screen>
11.  
    </template>
12.  
     
13.  
    <script>
14.  
    import { defineComponent } from "vue"
15.  
    import VScaleScreen from 'v-scale-screen'
16.  
     
17.  
    export default defineComponent({
18.  
    name:'Demo',
19.  
    components:{
20.  
    VScaleScreen
21.  
    }
22.  
    })
23.  
    </script>

注：使用时请将 body 样式设置为 overflow: hidden; 注：使用时请将 body 样式设置为 overflow: hidden; 注：使用时请将 body 样式设置为 overflow: hidden;

用法：

npm install v-scale-screen
# or 
yarn add v-scale-screen

 新增屏幕适配  GitHub - hangjob/flexible-pc: rem布局 ，16:9的比列，适配1440px 以上的所有大屏幕GitHub - hangjob/flexible-pc: rem布局 ，16:9的比列，适配1440px 以上的所有大屏幕

这篇好文章是转载于：学新通技术网