Angular CLI：集成Autoprefixer兼容多浏览器以及浏览器版本

Angular CLI使用Autoprefixer来兼容不同的浏览器以及多个浏览器版本，我们不需要做额外的工作来集成Autoprefixer。

Autoprefixer内部依赖于Browserslist，根据Browserslist的配置决定兼容哪些浏览器或浏览器版本。如果我们对浏览器的兼容范围有自己的需求，可以设置Browserslist的配置。

集成Browserslist配置到Angular CLI有两种方式。

• 集成到package.json
• 新增.browserslistrc配置文件

方式一：package.json添加browserslist属性

"browserslist": [
  "> 1%",
  "last 2 versions"
]

方式二：在项目的根目录添加.browserslistrc文件

### Supported Browsers

> 1%
last 2 versions

browserslist配置

配置规则示例

• last 2 versions: 每个浏览器最新的两个版本
• last 2 Chrome versions: Chrome最新的两个版本
• last 2 major versions: 浏览器最近两个主版本下的所有次版本
• last 2 iOS major versions: iOS Safari最近两个主版本的所有次版本
• > 5% 或 >= 5%: 根据全球使用统计，选择使用超过5%的版本
• > 5% in US: 美国地区统计超过5%的版本，国家代码
• > 5% in alt-AS: 亚洲地区超过5%的版本，地区码caniuse-lite/data/regions.
• > 5% in my stats: 使用自定义的统计，配置自定义统计方式
• ie 6-8: ie 6到8版本.
• Firefox > 20: 火狐大于20的版本
• Firefox >= 20: 火狐大于等于20的版本
• Firefox < 20: 火狐小于20的版本
• Firefox <= 20: 火狐小于等于20的版本
• Firefox ESR: 最靓的[Firefox ESR]版本.
• iOS 7: iOS浏览器版本为7
• unreleased versions:浏览器的alpha以及beta版本
• unreleased Chrome versions: Chrome浏览器的alpha以及beta版本
• not ie <= 8: 使用not排除支持的浏览器

支持浏览器范围

• Android ：Android WebView.
• Baidu
• BlackBerry 或 bb ：黑莓浏览器
• Chrome ：Chrome.
• ChromeAndroid or and_chr ：Android的Chrome浏览器
• Edge ： Edge.
• Electron : Electron 框架，它会转换为Chrome版本
• Explorer 或 ie
• ExplorerMobile or ie_mob ：IE手机浏览器.
• Firefox 或 ff ： Mozilla Firefox.
• FirefoxAndroid 或 and_ff ： Android Firefox.
• iOS 或 ios_saf ： iOS Safari.
• Opera ： Opera.
• OperaMini 或 op_mini ： Opera Mini.
• OperaMobile 或 op_mob ：Opera手机浏览器.
• QQAndroid 或 and_qq ：Androin版qq浏览器
• Safari ：桌面版Safari
• Samsung：三星浏览器
• UCAndroid 或and_uc Android的UC浏览器

更多配置参考Browserslist