跳至主要內容

新增 CSS 重置

這個專案設定使用 PostCSS Normalize 新增 CSS 重置

若要開始使用,請在 CSS 檔案的任何位置新增 @import-normalize;。您只需要包含一次,重複的匯入將自動移除。由於您只需要包含一次,因此建議將其新增至 index.cssApp.css

index.css

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

/* rest of app styles */

提示:如果您在 VSCode 中看到「未知的規則 @import-normalize css(unknownAtRules)」警告,請將 css.lint.unknownAtRules 設定變更為 忽略

您可以透過專案的 browserslist 控制要使用 normalize.css 的哪些部分。

browserslist最後 3 個版本 時的結果

/**
* 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;
}

browserslist最後 2 個版本 時的結果

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

img {
border-style: none;
}

瀏覽器支援

瀏覽器支援取決於 normalize.css 支援 的項目。在撰寫此文件時,包含以下項目

  • Chrome(最近 3 個版本)
  • Edge(最近 3 個版本)
  • Firefox(最近 3 個版本)
  • Firefox ESR
  • Opera(最近 3 個版本)
  • Safari(最近 3 個版本)
  • iOS Safari(最近 2 個版本)
  • Internet Explorer 9 以上