postcss-px-to-viewport实现屏幕适配

最近面试，很多面试官都问做过移动端吗？屏幕适配应该怎么实现呢？无奈自己太菜，粗略回答是通过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的教学视频，满满的干货～～主要是不花钱学习，哈哈哈