vue大屏自适应的实现方法(cv就能用)
更新时间：2022年06月02日 09:59:12 作者：万万没想到_
最近在用VUE写大屏页面,遇到屏幕自适应问题,下面这篇文章主要给大家介绍了关于vue大屏自适应的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
第一次接触大屏，领导给任务，让适配大小屏幕，然后我就面向百度了hhhh，看了很多版本都不太一样，于是我自己总结了一份，奶妈式教程，手把手教学，直接cv就可以用，这个方法也可以用来做移动端适配，只需要把 postcss.config.js文件里的大小改成移动端的设计稿大小/10，移动端俺没有实践过，小伙伴们需要的话可以试试哦，不出意外的话是没问题的吼吼
大屏
第一步：先下包，这里用到lib-flexible和postcss-pxtorem
直接下载postcss-pxtorem的话会报错，所以这里我们下载指定版本postcss-pxtorem@5.1.1
npm下载
npm install lib-flexible --save-dev
postcss-pxtorem：自动把px转成rmm
npm install postcss-pxtorem@5.1.1 --save-dev
yarn 下载
yarn add lib-flexible yarn add postcss-pxtorem@5.1.1
第二步：在main.js引入
import 'lib-flexible'
第三步：修改lib-flexible源文件配置
修改node_modules里lib-flexible里flexible.js，找到refreshRem 函数修改：
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr < 540) {
width = 540 * dpr;
}else if(width / dpr > 1980){
width = 1980 * dpr
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}注意：这里只需要修改屏幕最大宽度和最小宽度即可（540和1980）
第四步：在vue.config.js里配置
module.exports = {
css: {
sourceMap: false,
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
},
},
},
}第五步：在vue.config.js同级新建postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 192,
propList: ['*'],
},
},
}注意：这里的rootValue可以根据设计稿的大小/10即可
最后重新 npm run dev 或 yarn dev就ok啦
但是要注意，如果删除了node_modules的依赖，重新下载之后还是需要重新修改配置文件
总结
到此这篇关于vue大屏自适应实现的文章就介绍到这了,更多相关vue大屏自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue基于Element按钮权限实现方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
今天小编就为大家分享一篇解决vue axios的封装 请求状态的错误提示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue中导入excel文件的两种方式,大概有两种导入文件的方法：form表单和el-upload，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
Vue3+ElementPlus el-date-picker设置可选时间范围的示例代码
在Vue3中使用Element Plus的el-date-picker组件设置可选时间范围，你可以使用disabled-date属性，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-07-07
这篇文章主要介绍了JavaScript之实现一个简单的Vue示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了Vue动态组件表格的实现代码,包括框架结构组件，文中还给大家封装了几个组件，有按钮组件、图片组件、滑动开关，结合示例代码给大家详细讲解，需要的朋友可以参考下2022-10-10
本文给大家介绍Vue 实现穿梭框功能，代码分为css，html和js代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-10-10
这篇文章主要介绍了vue-element如何实现动态换肤存储问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了基于element-ui封装表单金额输入框的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
构建现代大规模应用程序最具挑战性的方面之一是数据获取,这也是 Vue Query 库的用途所在,下面就跟随小编一起学习一下如何利用Vue Query实现高级数据获取吧2023-08-08
最新评论