css at @ 规则

css相信我们都不陌生，但是我们真的对它非常了解吗？

css主要分为两种规则组成：

1. 一种被称为 at-rule，也就是 at 规则

2. 另一种是 qualified rule，也就是普通规则

今天让我们来讲讲我们不常用的 at 规则吧：

1.  @charset

@charset 用于提示 CSS 文件使用的字符编码方式，它如果被使用，必须出现在最前面，不能在<style>元素内的样式属性内使用。

我也没搞清楚具体有什么用，只要html和css保持编码一致，并且html上加上 <meta charset="xxxx"> 即可，@charset写不写也没什么作用

@charset "utf-8";

2. @import

@import 当时我以为是less sass的语法糖，其实它是css本身的特性，可以在css文件里引入其他css文件

@import ‘./style.css‘;@import url(./style.css);@import ‘./style.css‘ screen and (min-width:500px);

3. @media

@media查询应该是我们见得最多的@rule之一了，针对不同的媒体类型定义不同的样式

@media 媒体类型1,媒体类型2 and|not|only (媒体特性) { ???CSS-Code;}

媒体类型没有被废弃的只有以下几种：

1. all 所有设备

2. print 打印机和打印预览

3. screen 电脑/手机屏幕

4. speech 应用于屏幕阅读器等发声设备

媒体特性常用无非就是（更多）：

1. min-width、max-width

2. min-height、max-height

3. orientation（方向）:  landscape(横屏)/portrait(竖屏)

4. @page

@page 用于设置分页媒体的样式，和@media print相似，但是@page只能设置部分css样式

MDN原文说到： You can only change the margins, orphans, widows, and page breaks of the document.

5.  @counter-style

自定义list-style的图形，目前只有firefox支持，详情

@counter-style aaa { ?system: cyclic; ?symbols: ?; ?suffix: " ";} ?ul { ?list-style: aaa;}

6. @keyframes

也是我们常用的@rule之一，用于定义animation的动画帧

div { ???position: relative; ???height: 100px; ???background: red; ???animation: ?mymove 5s ease infinite;}@keyframes mymove{ ???from {top:0px;} ???to {top:200px;}}

7. @font-face

用于引入一些额外的字体，放在css顶部或者css规则组

@font-face { ?font-family: aaa; ?src: url(http://example.com/fonts/Gentium.woff);}p { font-family: aaa, serif; }

8. @support

用于检测css兼容的特性

@supports (display: grid) { ?div { ???display: grid; ?}}@supports not (display: grid) { ?div { ???float: right; ?}}

9. @namespace 

要和xml的命名控件配合使用，暂时还没搞明白怎么用，详情

/* 默认命名空间 */@namespace url(XML-namespace-URL);@namespace "XML-namespace-URL";/* 命名空间前缀 */@namespace prefix url(XML-namespace-URL);@namespace prefix "XML-namespace-URL";

10. @viewport

设置视窗的属性，目前safari、firefox都不支持，更多使用meta的形式来代替

@viewport { ?min-width: 640px; ?max-width: 800px;}@viewport { ?zoom: 0.75; ?min-zoom: 0.5; ?max-zoom: 0.9;}@viewport { ?orientation: landscape;}

css at @ 规则

原文地址：https://www.cnblogs.com/amiezhang/p/10392864.html