Vue3 pc 端配置 rem 响应式
2023-12-13 04:51:23
安装插件
npm install postcss-pxtorem && amfe-flexible
main.ts
import 'amfe-flexible';
vite.config.ts
import postCssPxToRem from 'postcss-pxtorem';
...
// 响应式设置
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 192, // 1rem的大小
propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
}),
],
},
},
App.vue
import { BrowserSize } from '@/utils/index';
onMounted(() => {
BrowserSize();
});
// @/utils/index
export function BrowserSize() {
var docEl = document.documentElement,
clientWidth: number,
clientHeight: number,
clientWidth = docEl.clientWidth;
clientHeight = docEl.clientHeight;
if (!clientWidth) return;
if (!docEl.addEventListener) return;
// clientWidth = 1920;
// if (clientWidth < 1920) {
// clientWidth = clientWidth;
// }
docEl.style.fontSize = clientWidth / 10 + 'px';
}
文章来源:https://blog.csdn.net/IAIPython/article/details/134925982
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!