位置: IT常识 - 正文
自适应的屏幕 lib-flexible 和 v-scale-screen(自适应屏幕宽度)
编辑：rootadmin推荐整理分享自适应的屏幕 lib-flexible 和 v-scale-screen(自适应屏幕宽度)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:自适应屏幕宽度,自适应屏幕是什么,自适应屏幕刷新率好吗,自适应屏幕尺寸,自适应屏幕的浏览器有哪些,自适应屏幕尺寸,自适应屏幕是什么,自适应屏幕宽度,内容如对您有帮助，希望把文章链接给更多的朋友！
首先是要安装
npm install lib-flexible --save然后在 修改
这个根据设计稿的大小来计算 这个是 把屏幕设计成24份 1920/24 80px=1rem
function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 1920) { width = 1920 * dpr; } var rem = width / 24; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }一定要引入啊
// px2rem 自适应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
使用
// main.jsimport Vue from "vue";import VScaleScreen from 'v-scale-screen'Vue.use(VScaleScreen)上面是代码可以直接复制 下面是图片
使用的地方如下
<template> <!-- width="1920" height="1080" 可写可不写额 --> <v-scale-screen fullScreen width="1920" height="1080" > <div class="a"> <div class="c"></div> </div> <div class="b"></div> </v-scale-screen></template><script>export default { data() { return { }; }, mounted() { }, methods: {},};</script><style lang="less" scoped>.a { width: 540px; height: 540px; background-color: red; display: flex; justify-content: center; align-items: center;}.b { width: 540px; height: 540px; background-color: rgb(24, 20, 228);}.c { width: 400px; height: 200px; background: rebeccapurple;}</style>api：
最重要的一点 记得这个标签
<v-scale-screen > <div class="a"> <div class="c"></div> </div> <div class="b"></div> </v-scale-screen>另外还是有样式的调整 在公共的位置
* { margin: 0; padding: 0;}body { overflow: hidden;}.screen-box { background: #fff !important;}.screen-wrapper{ margin: 0 !important;}具体的位置在
再页面上的显示效果
100%
50%
125%
vue3的用法
Vue3
我们在vue3中以组件方式导出
<template> <v-scale-screen width="1920" height="1080"> <div> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> <v-chart>....</v-chart> </div> </v-scale-screen></template><script>import { defineComponent } from "vue"import VScaleScreen from 'v-scale-screen'export default defineComponent({ name:'Demo', components:{ VScaleScreen }})</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 以上的所有大屏幕
上一篇：dvldr32.exe进程有危险吗 dvldr32进程安全吗(dll进程)
