vue大屏自适应的实现方法(cv就能用)
前言
第一次接触大屏,领导给任务,让适配大小屏幕,然后我就面向百度了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结合el-dialog封装自己的confirm二次确认弹窗方式
这篇文章主要介绍了vue结合el-dialog封装自己的confirm二次确认弹窗方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-08-08详解VUE自定义组件中用.sync修饰符与v-model的区别
这篇文章主要介绍了详解VUE自定义组件中用.sync修饰符与v-model的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-06-06vue+elementui实现动态添加行/可编辑的table
这篇文章主要为大家详细介绍了vue+elementui实现动态添加行/可编辑的table,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-07-07警告[vue-router] Duplicate named routes definition简单解决方法
这篇文章主要关于介绍了警告[vue-router] Duplicate named routes definition的解决方法,这个错误提示是因为在Vue Router中定义了重复的路由名称,需要的朋友可以参考下2023-12-12
最新评论