目的:适配不同屏幕分辨率的电脑
1.下载插件(npm i lib-flexible-computer -S//根节点会根据页面视口变化而变化font-size大小)
npm i lib-flexible-computer postcss-px2rem px2rem-loader -D
npm i lib-flexible-computer -S
2.在main.ts 里面导入
import "lib-flexible-computer";
3.在vite.config.ts中
import px2rem from "postcss-px2rem"
css: {
postcss: {
plugins: [
px2rem({
remUnit:192
})
]
}
}
以上就已经完成了,在此多说两句,如果网页中出现上下左右的滚动条的话可以尝试用一下代码来隐藏
html {
overflow-x:hidden; //隐藏x轴
overflow-y:hidden;//隐藏y轴
}
body {
overflow-x:hidden;//隐藏x轴
overflow-y:hidden;//隐藏y轴
}