最近面试，很多面试官都问做过移动端吗？屏幕适配应该怎么实现呢？无奈自己太菜，粗略回答是通过rem，bootstrap栅格布局去实现。面试官再问还有其他的方式实现吗？然后我就一脸黑人问号，加上最近看一位b站博主小满zs的教学视频，刚好看到这个章节，所以特意记录来下，加深一下自己的印象。

现在有了更好用的vw跟vh。

vw视口的最大宽度，1vw等于视口宽度的百分之一

vh视口的最大高度，1vh等于适口高度的百分之一

我们的ui设计稿上面一般标注的是px，所以我们需要使用一个插件来把px转换成为vw跟vh。

首先我们先来创建一个项目

然后用vs code打开项目，安装一下相关依赖,运行一下

npm run dev

项目可以正常运行的话，下面就可以进入正题了，安装一下所需的插件

npm install postcss-px-to-viewport -D

然后我们需要在vite.config.ts里面配置一下这个插件

但是里面会有一个报错，说这个插件缺少一个声明文件，我们尝试用这个方法去装一下，还是会一样报错，所以说明社区并没有给这个插件去写声明文件,所以这个插件目前是不支持ts的,那么或者我们去手写这个声明文件。

我们在根目录下创建一个postcss-px-to-viewport.d.ts文件,我们通过declare module给这个插件去扩充声明。

然后我们需要tsconfig.config.json里面引入一下postcss-px-to-viewport.d.ts这个文件

声明完之后，这个插件还要传一些参数

这里给你们贴出来

unitToConvert: 'px' | 'rem' | 'cm' | 'em',
viewportWidth: number,
viewportHeight: number, // not now used; TODO: need for different units and math for different properties
unitPrecision: number,
viewportUnit: string,
fontViewportUnit: string,  // vmin is more suitable.
selectorBlackList: string[],
propList: string[],
minPixelValue: number,
mediaQuery: boolean,
replace: boolean,
landscape: boolean,
landscapeUnit: string,
landscapeWidth: number

这时候报错已经不见了，这个插件常用到两个参数只有两个

下面我们就写个小demo测试一下这个插件, 这里需要提醒一下需要安装一下npm install less，不然运行的时候会报错

<template><div class="wraps"><header class="header"><div>left</div><div>中间</div><div>right</div></header><main class="main"><div class="main-items" v-for="item in 100"><div class="main-port"></div><div class="main-desc"><div>小霖{{ item }}</div><div>小霖dec描述内容</div></div></div></main><footer class="footer"><div class="footer-items" v-for="item in footer"><div>{{ item.icon }}</div><div>{{ item.text }}</div></div></footer></div>
</template><script setup lang='ts'>
import { reactive } from 'vue'
type Footer<T> = {icon: T,text: T
}const footer = reactive<Footer<string>[]>([{icon: "1",text: "首页"},{icon: "2",text: "商品"},{icon: "3",text: "信息"},{icon: "4",text: "我的"},
])</script><style lang="less">
* {padding: 0;margin: 0;
}html,
body,
#app {overflow: hidden;height: 100%;
}.wraps {height: inherit;display: flex;flex-direction: column;overflow: hidden;}.header {display: flex;background: pink;justify-content: space-around;padding: 5px;
}.main {flex: 1;overflow: auto;&-items {border-bottom: 1px solid #ccc;padding: 5px;display: flex;}&-port {width: 30px;height: 30px;background: black;border-radius: 200px;}&-desc {margin-left: 10px;div:last-child {font-size: 10px;margin-top: 5px;}}
}.footer {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;border-top: 1px solid #ccc;&-items {display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 3px;div:last-child {margin-top: 5px;}}
}
</style>

这时候我们发现插件已经成功帮我们把px转成vw、vh，已经实现屏幕适配了

最后，共勉一下，一定要持续学习，才能更好的拥抱变化。大家有兴趣的话，也可以去b站看看小满zs的教学视频，满满的干货～～主要是不花钱学习，哈哈哈