【css】使用post-css实现屏幕自适应

安装

npm i postcss autoprefixer postcss-pxtorem -D

创建ts文件或者直接引入main.ts

//基础字体大小
const rootValue = 16;
//设计稿的宽度
const rootWidth = 390;
//当前设备的视口宽度
const deviceWidth = document.documentElement.clientWidth;
//计算根据根元素字体的大小
document.documentElement.style.fontSize = `${(deviceWidth * rootValue)/rootWidth}px`;

使用

随意一个vue文件中，浏览器打开之后设置窗口大小展示自适应结果

<script setup lang='ts'>
</script>
<template>
    <div class="test">这是一个字体自适应哦！</div>
</template>
<style scoped>
.test {
    font-size: 39px;
}
</style>