CSS @规则

更新于 2020-02-10写于 2020-02-10前端

@规则

@charset — Defines the character set used by the style sheet.

@import — Tells the CSS engine to include an external style sheet.

@namespace — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.

嵌套 @规则

@media— 满足媒体查询条件则里面的 CSS 生效。例如：Bootstrap 使用下面的范围作为条件

css

 1/* https://getbootstrap.com/docs/4.2/layout/overview/#responsive-breakpoints */
 2
 3// Extra small devices (portrait phones, less than 576px)
 4// No media query for `xs` since this is the default in Bootstrap
 5
 6// Small devices (landscape phones, 576px and up)
 7@media (min-width: 576px) { ... }
 8
 9// Medium devices (tablets, 768px and up)
10@media (min-width: 768px) { ... }
11
12// Large devices (desktops, 992px and up)
13@media (min-width: 992px) { ... }
14
15// Extra large devices (large desktops, 1200px and up)
16@media (min-width: 1200px) { ... }

@font-face— 可以给文本指定的自定义字体。例如：antd 用她指定中文的单双引号的字体

css

 1/* 
 2https://github.com/ant-design/ant-design/blob/3.12.1/components/style/core/base.less 
 3指定中文的单双引号的字体
 4*/
 5
 6@font-face {
 7  font-family: "Chinese Quote";
 8  src: local("PingFang SC"), local("SimSun");
 9  unicode-range: U+2018, U+2019, U+201c, U+201d;
10}

@support— 被检查的 CSS 声明有效则里面的 CSS 生效（IE11 不支持这个规则）。例如：为支持 flex 的浏览器提供 flex 的样式

css

1@supports (display: flex) {
2  // code for supporting browsers
3}

等。。

参考

@规则 | MDN