Skip to main content

添加 CSS 重置

此项目设置使用 PostCSS 规范化 添加 CSS 重置

¥This project setup uses PostCSS Normalize for adding a CSS Reset.

要开始使用它,请在你的 CSS 文件中的任意位置添加 @import-normalize;。你只需要包含一次,重复的导入会自动删除。因为你只需要包含它一次,所以添加它的好地方是 index.cssApp.css

¥To start using it, add @import-normalize; anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is index.css or App.css.

index.css

@import-normalize; /* bring in normalize.css styles */

/* rest of app styles */

提示:如果你在 VSCode 中看到 "规则未知 @import-normalize css(unknownAtRules)" 警告,请将 css.lint.unknownAtRules 设置更改为 ignore

¥Tip: If you see an "Unknown at rule @import-normalize css(unknownAtRules)" warning in VSCode, change the css.lint.unknownAtRules setting to ignore.

你可以通过项目的 browserslist 控制使用 normalize.css 的哪些部分。

¥You can control which parts of normalize.css to use via your project's browserslist.

browserslistlast 3 versions 时的结果:

¥Results when browserslist is last 3 versions:

/**

* Add the correct display in IE 9-.
*/

audio,
video {
display: inline-block;
}

/**

* Remove the border on images inside links in IE 10-.
*/

img {
border-style: none;
}

browserslistlast 2 versions 时的结果:

¥Results when browserslist is last 2 versions:

/**

* Remove the border on images inside links in IE 10-.
*/

img {
border-style: none;
}

浏览器支持

¥Browser support

浏览器支持由 normalize.css 支持 决定。在撰写本文时,它包括:

¥Browser support is dictated by what normalize.css supports. As of this writing, it includes:

  • Chrome (last 3)

  • Edge (last 3)

  • Firefox (last 3)

  • Firefox ESR

  • Opera (last 3)

  • Safari (last 3)

  • iOS Safari (last 2)

  • Internet Explorer 9+