写在前面的话：看了这篇文章，有些东西名词啥的不懂的，或者有疑问的推荐百度，因为写的太多真的显得很啰嗦！

1.移动端开发适配

目前移动端适配，在市面上主流适配方案无非就两种，rem方案和vw方案。这些方案，就可以自动适配不同移动端屏幕尺寸动态缩放。其实他的适配，你可以理解为整个页面进行放大缩小，充满整个屏幕。记得要在html设置如下meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">

vw方案：把px转换为vw单位，通过设置viewportWidth:750，750px = 100vw，1vw = 7.5px，这里就跟小程序上的rpx单位类似。
rem方案：把px转换为rem单位，受到html上的font-size影响。但是我们不能把这个font-size写死，它应该是基于屏幕大小动态变化，才能适配不同的手机屏幕。这里可以借助插件帮我们自动设置基准值和自动把px转换为rem单位，在这里有介绍。
两个方案demo
- mian分支:无vw方案与rem方案，个人模板
- mobile分支:基于main分支，加入了vw方案与rem方案，可以通过vite.config.ts 修改useVwModel值进行切换
- mobile_vant:基于mobile分支，引入了vant框架，进行了vant配置
演示demo

html {//假设375的设计稿，设置了基准值为20px，那么当屏幕为750的时候，这里的font-size大小应该为40px。因为相当于整体放大了两倍font-size: 20px;//1rem = 20px
}//375：font-size:20px  750：font-size:40px
<div style="font-size: 1rem;">国破山河在城春草木深</div>//375:font-size:40px  750:font-size:80px
<div style="font-size: 2rem;">感时花溅泪恨别鸟惊心</div>

2.vw适配方案（推荐）

只需要安装插件：postcss-px-to-viewport

安装：npm install postcss-px-to-viewport --save-dev
vite配置参考如下：

//在vite.config.ts中
// vw方案（无像素差）：px自动转换vw
import pxtovw from "postcss-px-to-viewport"
export default defineConfig({css: {postcss: {plugins: [autoprefixer({overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']}),pxtovw({unitToConvert: 'px', // 要转化的单位viewportWidth: 750, //100vw=750px，UI设计稿的宽度,vant是375。可参考这个：https://juejin.cn/post/6961737808339795975unitPrecision: 6, // 转换后的精度，即小数点位数propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vwfontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值landscape: false, // 是否处理横屏情况// exclude: [/node_modules\/vant/i]})],},},})

3.rem适配方案（有0.1px误差）

需要安装两个插件，1rem=html上的font-size

插件一：lib-flexible —— 用于自动设置 rem 基准值(也就是html上的font-size)，切记需要再main.js中 import ‘amfe-flexible’ 后才会自动设置基准值

插件二：postcss-pxtorem —— 是一款 postcss 插件，用于将px单位转化为 rem（你可以直接在项目中写px，它会自动帮你转换为rem单位）

安装插件一：npm i amfe-flexible -D
安装插件二：npm i postcss-pxtorem -D
在main.js文件中： import ‘amfe-flexible’
安装（自动管理浏览器前缀，非必装）：npm install autoprefixer --save
如果使用了unocss参考配置，使用下面的unocss插件把自带的rem转换为px，在通过postcss-pxtorem转换为rem
unocss插件(把默认的rem单位转换为px，完整配置参考demo)：npm install -D @unocss/preset-rem-to-px
vite配置参考如下：

//在vite.config.ts中
// rem方案（部分转换后会有0.1px的像素差，推荐vw方案）：css自动转换为rem，切记需要再main.js中 import 'amfe-flexible' 自动设置基准值
import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig({css: {postcss: {plugins: [autoprefixer({overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']}),postCssPxToRem({// 自适应，px>rem转换rootValue:75, // 这里代表的是1rem等于多少rootValue的px。75表示750设计稿，37.5表示375设计稿propList: ['*'], // 需要转换的属性，这里选择全部都进行转换selectorBlackList: ['norem', 'ignore'], // 过滤掉norem-开头的class，不进行rem转换mediaQuery: false,  // 允许在媒体查询中转换 px}),],},}
})

4.原子化插件 unocss 与 tailwindcss

原子化的意思就是，把css的每一个属性，定义成一个class，这样子的话，我们写样式的时候，可以直接写，无需再命名class，好维护，如颜色大小主题等。部分样式参考：

style="width:100%;height:50px;display:flex;flex-direction:row;background:white;"// unocss || tailwindcss
class="w-full h-[50px] flex flex-row bg-white"

就我使用一段时间以来，我最大的感受的就是太爽了，再也不需要命名class，写起来很丝滑。但是我认为它也有一些弊端，比如：1.前期有个学习记忆的成本（多敲就好）。2.个人开发又快又好的，团队开发可能要被骂娘（强制别人学习使用囧），除非他们也用。3.复用问题，因为它分的太细了，如果一些组合样式经常要用到，不好进行复用，可以通过使用@apply解决。

unocss是基于tailwindcss的。虽然我用的unocss，但是我查文档用的tailwindcss，写法跟tailwindcss是一样的囧！这两个框架优劣百度更详细

5.引入移动端vant框架

vant框架的设计稿是375，如果我们自身的设计是375那就无需做额外的配置，但是如果我们是750的设计稿，那么rem方案和vw方案需要多做一些配置。这里配置参考两个方案demo

6.关于rpx

rpx是微信小程序上的单位，750rpx=100vw，在设计稿750的情况下，1px = 1rpx。在设计稿为375的情况下，2px = 1rpx。建议小程序开发使用750设计稿！

uniapp项目运行在浏览器上会把rpx转换为rem，rem适配方案
uniapp运行在小程序上，则不会进行转换。这里超出750，长度溢出了。

7.关于uniapp使用unocss

推荐这个项目uni-app vue3中使用，它是基于uniapp官方模板。clone这个项目后，修改package.json
“unocss-preset-weapp”: “^0.53.5”,然后通过pnpm i安装依赖
这个可以直接在uniapp运行，但是这个unocss插件提示支持不好，推荐用vscode。所以在vscode使用如下：

运行在浏览器：pnpm run dev:h5
运行在小程序：pnpm run dev:mp-weixin,但是它只是实时监听文件变动和生成最新代码，你需要手动启动微信开发者工具并双击打开项目。打开后，后续实时修改能够实时更新！