vue3下有没有什么办法, 让某个页面px to rem自适应?

作者站长头像
站长
· 阅读数 9

求帮忙, 需求是vue项目里的某个页面, 只需要这一个, 能自适应大小(自动根据1920设计图计算PX改成rem)在做的管理系统中, 首页是个大屏, 需要把大屏写在管理系统首页里, 同时也要是个大屏。所以就需要px-to-rem这种插件。以前直接写大屏都是用的:@njleonzhang/postcss-px-to-rem或者postcss-pxtorem。但是都没用, 会影响整个项目的UI框架, 不管怎么设置他们的include或者排除等等属性都不行。有什么好用的插件吗?总之就是想把管理系统首页的大屏做成全部自适应, 字体 间距 跟着分辨率改变而改变

回复
1个回答
avatar
test
2024-07-05

我是使用jquer获取width, 以375作为的基准值, VScode使用px2rem插件answer image在首页的mounted中引入下面的, 基准值根据你的项目修改, 首页中的单位改一下就好了在基准值我是以html的font-size为10px算的, 这样其他的单位转成rem好转

 let appWidth = $('#app').width()
 let size = (appWidth / 375) * 10
 document.documentElement.style.fontSize = size + 'px';
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容