江苏省住房和城乡建设厅假网站,hyperapp wordpress,网站设计报价单模板,重庆网站建设 重庆网站制作前端需要用到postcss的工具#xff0c;用到一个插件叫autoprefixer#xff0c;这个插件能够给css属性加上前缀#xff0c;进行一些兼容的工作。
如何安装之类的问题在csdn上搜一下都能找到#xff08;注意#xff0c;vite是包含postcss的#xff0c;不用在项目中安装pos…前端需要用到postcss的工具用到一个插件叫autoprefixer这个插件能够给css属性加上前缀进行一些兼容的工作。
如何安装之类的问题在csdn上搜一下都能找到注意vite是包含postcss的不用在项目中安装postcss苦笑我看了一下官方是建议在package.json之中进行配置的。
postcss我个人是在vite.config.js当中配置的具体兼容哪些浏览器是在package.json只中配置的我感觉这也算项目配置的一部分。如下
vite.config.js
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import autoprefixer from autoprefixer// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],css: {postcss: {plugins: [autoprefixer({// 这边显示最好的方式还是在package.json中进行限制grid: true})]}}
})
package.json:
{name: postcss-test,private: true,version: 0.0.0,type: module,scripts: {dev: vite,build: vite build,preview: vite preview},dependencies: {vue: ^3.2.47},devDependencies: {vitejs/plugin-vue: ^4.1.0,autoprefixer: ^10.4.14,vite: ^4.3.9},browserslist: [cover 98% in CN,not dead,ie 8]
}
可以注意到最后的browserslist字段其中就是我对兼容的浏览器的配置表示覆盖98%的active浏览器同时兼容ie8往上的版本只是自己的写法不是最佳实践
写了那么多废话到了重点这个配置究竟怎么写呢我怎么知道我写的配置所覆盖的浏览器类型呢这里要借助两个网站一个是GitHub - browserslist/browserslist: Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env - GitHub - browserslist/browserslist: Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-envhttps://github.com/browserslist/browserslist#best-practices
官网提供的最佳实践页面就是教你写这个配置的。
配置产生的效果可以在这个网站上观看效果BrowserslistDisplay target browsers from a Browserslist confighttps://browsersl.ist/#qlast8versions%2Cnotdead%2C%3E0.2%25®ionCN
比如我看到同样的一篇关于 autoprefixer的文章上的配置是这样写的
autoprefixer({. // 自动添加前缀overrideBrowserslist: [Android 4.1,iOS 7.1,Chrome 31,ff 31,ie 8//last 2 versions, // 所有主流浏览器最近2个版本],grid: true})
这里部分截取了他的配置明显限定了安卓和ios的版本我们在上面的网站上看看能兼容多少浏览器 这边告诉我只能cover 7.5%in china此外还把对应的型号告诉你了来看一下我这个配置 能兼容的就比较多了对吧但我感觉这个还是有问题的因为你兼容的越多这个css的量写的也就越多对吧那文件本身也就越臃肿所以我感觉还是根据defaults的配置进行扩容比较好。另外有啥比较好的实践经验也可以分享出来。
