vue

2023-09-11 15:04| 来源: 网络整理| 查看: 265

目录第一步：安装插件第二步：装好之后在main.js 里引入 lib-flexible第三步：在vue.config.js 中添加配置第四步：设置flexible.js的宽度根据屏幕大小自动适配，修改flexible.js 文件，（全局搜索 flexible.js）第五步：设置完成后重新启动项目，查看效果

前期准备：

vue 2.0 vue-cli3 脚手架 flexible 插件自适应插件 px2rem-loader 插件将px转化为rem postcss-loader postcss

gitee仓库地址 https://gitee.com/hanks_s/vue-big-screen.git 点个star⭐️！！！

第一步：安装插件 npm i lib-flexible -S npm i px2rem-loader -D npm install --save-dev postcss-loader postcss 第二步：装好之后在main.js 里引入 lib-flexible import 'lib-flexible'

在这里插入图片描述

第三步：在vue.config.js 中添加配置 module.exports = { chainWebpack: config => { config.module .rule("css") .test(/\.css$/) .oneOf("vue") .resourceQuery(/\?vue/) .use("px2rem") .loader("px2rem-loader") .options({ remUnit: 192 }); } } 第四步：设置flexible.js的宽度根据屏幕大小自动适配，修改flexible.js 文件，（全局搜索 flexible.js）

在这里插入图片描述修改后代码：

function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = width * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } 第五步：设置完成后重新启动项目，查看效果

测试代码

大屏展示占满全行占行一半 export default { name: "test", data() { return { name: `test` } }, mounted() { }, methods: {} } .bg{ height: 100vh; width: 100vw; background: #efefef; /*overflow: hidden;*/ } .header{ height: 150px; text-align: center; font-size: 50px; line-height: 150px; } .body{ height: calc(100% - 150px); } .body div{ line-height: 150px; text-align: center; color: #fff; font-weight: bold; } .box-full { width: 1920px; height: 150px; background: red; } .box-half{ width: 920px; height: 150px; background: green; }

在这里插入图片描述拓展参考： https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

【本文地址】

vue

vue

今日新闻

推荐新闻