一、操作方法

我们通常可以使用vw 完成移动端适配（这里用vue3来举例）

1、安装：

2、配置： postcss.config.js

3、测试

有一个控制台警告可忽略，或者使用 postcss-px-to-viewport-8-plugin 代替当前插件

二、适配概念：

移动端适配是指同一个页面可以在不同的移动端设备上都有合理的布局。主流的实现方案有两种：

响应式布局，通过@media实现一套html配合多套css实现适配；

通过rem或者vw,vh等实现不同的设备俺照相同的比例适配；

比如小米移动端商城，很明显是采用了rem等比适配的方案。而 不凡官网，采用了@media媒体监听实现适配。

三、实现原理

第一种：rem实现原理

rem是一个倍数单位，它是基于html的font-size的倍数。只要我们在不同的设备上设置一个合适的初始值，当设备发生变化font-size就会自动等比适配大小，从而在不同的设备上表现统一。

比如说：移动端设计稿一般会以750px进行交付，而手机实际像素可能是375px。那么一般我们会以设备宽度的1/10作为初试html的font-size大小，当然这个值是动态的，在不同设备上得到的值不同。

比如有的设备宽度是375px，那么html初始font-size就是37.5px，如果设备宽度是300px，那么font-size就是30px。 因为内容都是rem基于font-size的倍数，所以不同宽度的设备上都是等比显示的。

注意：这个font-size基数到底是不是设备的1/10是没有统一论调的，你可以用1/n任意定义。关键是理解rem适配的原理是元素等比缩放。

第二种： 媒体监听

同一块内容在不同设备上有合理的表现。比如在PC端一行能同时展示4个元素块，而在移动端只能一行展示1个或者2个元素块(要不看不清)。

那么就可以通过监听媒体宽度，给元素设置不同的宽度，从而有合理的表现。