应用场景
页面需要在pc端和移动端同时兼容，以前我的方案都是使用媒体查询来判断当前设备大小，然后写两套或者三套css代码来兼容他们，能达到目的，并且效果不错，但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.js脚本，稍作修改，基本可以满足我的需求。
postcss-px2rem
yarn add postcss-px2rem
postcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件
// css相关配置
css: {
// 启用 CSS modules
modules: false,
Vue CLI 3 适配所有端方案的实现主要涉及到移动端和桌面端的兼容性处理，以及CSS单位转换和响应式布局。以下是对这些知识点的详细解释：
1. **媒体查询（Media Queries）**：传统的解决方案是通过CSS中的媒体查询来判断设备类型，如`@media screen and (max-width: 768px)`，针对不同设备尺寸编写不同的CSS样式。这种方法虽然有效，但维护成本较高，尤其当需要适配多种设备时。
2. **flexible.js**：flexible.js 是一种用于移动端适配的解决方案，它会根据设备的像素密度动态调整页面的初始缩放比例，从而实现响应式布局。它会自动添加或更新`<meta name="viewport">`标签，以适应不同设备的视口宽度，避免开发者手动处理。
3. **postcss-px2rem 插件**：这个插件的主要作用是将CSS中的像素单位（px）转换为相对单位（rem），以适应不同屏幕尺寸。在 Vue CLI 3 的配置文件 `vue.config.js` 中启用该插件，例如：
```javascript
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({ remUnit: 75 }) // 设计图基础单位通常是75px
]
}
}
}
}
```
其中 `remUnit` 的值根据设计图的基准尺寸来设定，这样开发者可以直接按照设计图的尺寸进行1:1开发。
4. **响应式设计与自适应布局**：在使用flexible.js和postcss-px2rem后，页面的布局应采用流式或者响应式设计，利用百分比、flexbox 或 grid 布局来确保元素在不同设备上都能正确显示。对于PC端，可能需要额外的CSS规则来覆盖或补充移动端的样式。
5. **DPR（Device Pixel Ratio）**：设备像素比，表示设备物理像素与CSS像素的比例。在flexible.js中，DPR被用来计算字体大小和rem单位的值。
6. **viewport meta标签**：在使用flexible.js时，不需要手动添加`<meta name="viewport">`标签，因为flexible.js会自动处理。但在某些特殊情况下，可能需要自定义某些属性，如`viewport-fit=cover`。
7. **页面重置与事件监听**：为了确保在页面重载或窗口大小改变时仍能保持适配，需要监听`resize`和`pageshow`事件，以便重新计算并设置rem单位。
通过以上技术的组合使用，Vue CLI 3 项目可以实现对各种设备的良好适配，包括PC和移动设备。这种方法简化了开发过程，提高了代码复用性和维护性，同时保证了用户体验的一致性。然而，要注意在实际项目中可能还需要结合其他策略，如图片的响应式处理、JavaScript适配检测等，以确保全方位的跨平台兼容性。
