At-rules規則是目前CSS中一種常見的語法規則，它使用一個"@"符號加一個關鍵詞定義，後面跟上語法區塊，如果沒有則以分號結束即可。
這種規則一般用於標識檔案、引入外部樣式、條件判斷等等，本文是對該規則的使用總結。
@import 主要用於從其他樣式表匯入新的樣式規則，語法：@import url|string list-of-mediaqueries;。
@import "./reset.css";
@import url("./reset.css")
當使用條件判斷時，可以使用媒體查詢條件。
/* 寬度小於1000px才會生效 */
@import "./reset.css" screen and (max-width: 1000px);
另外，當在html檔案或樣式檔案中使用該語法(不使用現代框架)，有兩點需要注意：
<style>區塊的頭部，前面不可以出現其他css樣式，但可以在@charset 後面。當使用vue等框架的時候，則可以在
@import前出現css樣式，也能在條件巢狀語法中使用，是因為匯入的樣式資源會被解析具體的樣式到頁面上。
@font-face 用於載入自定義字型。屬於目前前端比較常用的語法，也有多開源的字型圖示庫可以使用。
既支援提供字型資原始檔路徑進行載入，也支援使用者本地安裝的字型載入。
@font-face {
font-family: "iconfont";
src: url('https://at.alicdn.com/t/font_....ttf?t=1545807318834');
}
@font-face {
font-family: "iconfont";
src: url('./font_985780_km7mi63cihi.ttf?t=1545807318834');
}
如上，就是一個載入字型資源的範例，一個載入cdn上的地址，一個載入本地檔案。
@font-face 定義了一個CSS區塊，有多個屬性取值：
src: local("Arial");；@font-face {
font-family: "sys-Arial";
src: local("Arial");
font-weight: normal;
}
如上，使用local載入當前電腦系統的字型名稱。
@charset 為樣式表檔案指定所需要使用的字元編碼，只能在CSS檔案中使用，語法：@charset "charset";。
@charset "UTF-8";
特點：
<style>區塊或元素內樣式屬性中使用。瀏覽器解析樣式表檔案使用字元編碼的順序：
@keyframes 通過定義動畫序列中的關鍵幀的樣式，用來控制CSS動畫的中間步驟。
語法定義：@keyframes animationname { keyframes-selector { css-styles; } }。
@keyframes dropIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes wave {
0% {
transform: translateY(0);
}
45% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
如上，使用兩種方式定義的關鍵幀動畫樣式。
特性說明：
!important 限定樣式會被忽略，不起作用。為了獲得最佳動畫體驗，應該始終定義開始和結束狀態。
@media 媒體查詢，是基於不同的媒體查詢結果定義不同的樣式。多用於針對不同螢幕尺寸進行差異化的樣式設定，做一些響應式頁面設計。另外，如果縮放瀏覽器的大小，也可以根據查詢寬高重新渲染頁面樣式等。
語法： @media mediatype and|not|only (media feature) { CSS-Style; }。
說明：
mediatype：媒體型別，描述裝置類別，一般有 all、print、screen、speech，預設all：
媒體特性(media feature)：描述裝置、環境的具體條件特徵；必須使用括號括起來，常用的有：
邏輯操作符：and、not、only、，：
or;@media screen (max-width: 1000px) {
div {
background-color: red;
}
}
/*或者巢狀*/
@media screen {
@media (max-width: 1000px) {
div {
background-color: red;
}
}
}
如上範例，即是我們經常使用的方式。
@media媒體查詢也能作為@import的條件使用，可見上面已有介紹。
在引入樣式表的 <link> 語句中，也可以使用媒體查詢，根據不同的條件載入不同的樣式檔案：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="./reset.css">
<link rel="stylesheet" media="screen and (max-width: 1000px)" href="./reset.css">
在 <style> 樣式區塊也可以使用媒體查詢：
<style media="screen and (max-width: 1000px)">
div {
background-color: red;
}
</style>
使用Window.matchMedia() 和MediaQueryList.addListener() 方法來測試和監控媒體狀態。
使用方式：
// 獲取媒體查詢MediaQueryList物件，有matches
const screenMediaQueryList = Window.matchMedia('(max-width: 1000px)')
console.log(1, screenMediaQueryList)
// matches: true -- 當前媒體查詢規則已生效，為false則不生效
// media: "(max-width: 1000px)"
screenMediaQueryList.addEventListener('change', (res) => {
console.log(2, res)
})
可以獲取當前是否已使用該媒體查詢規則，或者監聽媒體查詢狀態的變化事件。
以下是一些使用較少的@規則。
@supports 用於指定依賴於瀏覽器一個或多個特定CSS功能的支援申明。常用來判斷當前瀏覽器是否支援某個CSS特性功能，所以又被稱為特性查詢。
ie不支援。
如判斷自定義屬性，詳見自定義屬性知識介紹。
@supports ((--a: 0)) {
/* 支援自定義屬性 */
}
@supports (not (--a: 0)) {
/* 不支援自定義屬性 */
}
語法，由一組樣式宣告和一條支援條件構成，支援條件可以是多條，可以使用 and、or、not 等進行結合處理；還可以使用圓括號調整優先順序。
/* 瀏覽器支援grid */
@supports (display: grid) {
div {}
}
/* 不支援grid */
@supports not (display: grid) {
}
/* 不支援gri和flex */
@supports not ((display: grid) and (display: flex)) {
}