vue中fix to rem/px to rem

插件介绍

amfe-flexible 动态设置font-size
postcss-px2rem 将px转换成rem

补充

  • amfe-flexible和lib-flexible未区分横竖屏，导致横屏时font-size根据宽度计算，导致页面变大

在插件amfe-flexible基础上进行开发，加入横屏时以高度未准进行计算

  • 建议使用改良后的amfe-flexible，因为lib-flexible在动态设置font-size时有刷新，交互不如amfe-flexible流畅

amfe-flexible修改如下：
横竖屏判断参考：https://www.cnblogs.com/cdj61/p/9342041.html
index-1.js
image.png

image.pngwhy and what

首先我要先解释一下这两个单位：

px ：pixel的缩写,像素的意思
rem : 是一个相对单位，1rem等于根元素的font-size值

其次，为什么要实现px to rem?

移动端布局有两种：流式布局和rem布局
其中，rem布局的原理就是页面中的元素采用rem作为尺寸或者间距的单位，由于我们平时都是以px(像素)为单位，所以我们就得px转rem

fixtorem

image.png
版权声明：本文为CSDN博主「dduanlove」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_46613478/java/article/details/106058968

pxtorem

百度一下：postcss-pxtorem

code

import ‘schofe-flexible’
vue.config.js
css: {
loaderOptions: {
postcss: {
plugins: [
require(‘postcss-px2rem’)({ remUnit: 384 })
]
}
}
},
pluginOptions: {

大屏适配

scale

前端大屏项目的屏幕适配方案
https://www.jianshu.com/p/03103d274065
1.初始化的时候获得大屏幕的比例
2.把这个比例设置给css的scale变量
3.监听浏览器的窗口大小, 将新的比例赋给scale变量

flexible

vue中解决 “数据大屏“ 展示的屏幕适配问题
https://blog.csdn.net/qq_40282732/article/details/105962708