vue2大屏适配lib-flexible与postcss-px2rem
·
vue2大屏适配这里采用了一个新的方案，由于这个项目就是一个PC大屏，所以需要对整个项目进行适配，postcss-px2rem就是对所有的px转变成为rem的，由于rem是根据font-size的值改变元素大小的，所以他们搭配起来就很完美。
lib-flexible与postcss-px2rem
由于本人亲自尝试，使用npm下载lib-flexible成功之后，但是在main.js中引入成功之后html元素的font-size没有随着页面的大小而改变，所以这里采用了另一个方案，直接从libe-flexible下载他的源码，然后放入到项目中，在main.js中直接import，lib-flexible的唯一作用就是拖动浏览器可以改变html的字体大小，如果大小改变了，那么就说明这一步成功了。
首先在vue.config.js中配置postcss-px2rem，这里使用的是vue2，配置如下：
在main.js中引入lib-flexile
然后去测试：
这里写了一个在1920px×1080px下一个960px×440px的盒子，那么他在1920px×1080px的屏幕下盒子大小为960px×440px，在其他屏幕下页应该占有四分之一，
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)