基于postCSS手写postcss-px-to-vewiport插件实现移动端适配

🌟前言

        目前前端实现移动端适配方案千千万，眼花缭乱各有有缺，但目前来说postcss-px-to-vewiport是一种非常合适的实现方案，postcss-px-to-vewiport是一个基于postCss开发的插件，其原理就是将项目中的px单位转换为vw(视口宽度)。对postCss不了解的朋友可以看看我的上篇文章postCss基本介绍。

🌟实现

        本篇文章是使用vite + vue3 基于postCss来实现postcss-px-to-vewiport插件。

1.创建项目

使用vite创建

npm init vite@latest

使用vue脚手架创建

vue create projectname

选自己喜欢的方式创建就OK

2.简单布局

在公司项目开发中，UI会出设计图，会有一个设计稿的宽度，然后我们根据这个宽度去适配，假设我们现在设计稿的宽度是1280，那么我们写出下面的简单布局：

App.vue文件：

<template>
  <div class="page">
    <div class="le