如何处理浏览器兼容性问题

css中postcss的插件Autoprefixer是什么？

Autoprefixer是一款自动管理浏览器前缀的插件，可以解析css文件并且添加前缀到css内容里。

优点：

（1）、写纯净的css，不必学习特殊语言（如Sass），也不必记住其使用环境；
（2）、与最新的规则同步；

使用：

npm install postcss
npm install autoprefixer

在main.js中引用

 但是！

但是直接使用postcss-preset-env就可以包含上述插件，他可以帮助我们将一些现代的css特性，转成大多数浏览器认识的css，并根据目标浏览器或运行环境添加所需polyfill。更强大

 安装：npm i postcss-loader postcss-preset-env --D

 

 如何处理浏览器兼容性问题：

• js兼容性：这个除了最低ECMAScript5标准浏览器环境支持，通常还会使用babel-loader和@babel/preset-env把很多es6 es7高级语法解析成es5语法，以保证更好的兼容性。
• css兼容性：很多样式例如flex布局也需要兼容性处理，一般我们会使用postcss-loader和postcss-preset-env来做兼容性处理。
  这样开发人员基本可以无视浏览器兼容性问题，减少了很多工作复杂度。

参考文章：

Vue3项目中：autoprefixer和postcss-pxtorem的组合使用

https://blog.csdn.net/u013938465/article/details/122448766

vue3.0+vite 使用 postcss-pxtorem 自适应（px转rem）

https://blog.csdn.net/weixin_49295874/article/details/122000566?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&utm_relevant_index=2