问CSS中“@”符号的用途是什么？

EN

@在CSS1中的@import时代就已经出现了，尽管它在最近的@media (CSS2，CSS3)和@font-face (CSS3)构造中变得越来越普遍。但是，正如我所提到的，@语法本身并不新鲜。

这些在CSS中都被称为at-rules。它们是针对浏览器的特殊指令，与使用规则和属性在Web文档中设置(X)HTML/XML元素的样式没有直接关系，尽管它们在控制样式的应用方式方面扮演着重要的角色。

一些代码示例：

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

• @font-face rules定义了在您的设计中使用的自定义字体，这些字体并不总是在所有计算机上都可用，因此浏览器从服务器下载一种字体，并以该自定义字体设置文本，就像用户的计算机将font.
• @media rules，与media queries (以前只有media types)结合使用一样，控制应用哪些样式，而不是基于显示页面的媒体。在我的代码示例中，只有在打印文档时，所有文本才应该在白色(纸张)背景上设置为黑色。您可以使用媒体查询来筛选出打印媒体、移动设备等，并为这些设备设置不同的页面样式。

At-rules与selectors没有任何关系。由于其不同的性质，不同的at-rules在众多不同的模块中以不同的方式定义。更多的例子包括：

• Conditional rules
• Keyframe animations
• Paged media

(这个列表远不是详尽的)

你可以在MDN上找到另一个非详尽的列表。

@用于定义规则。

@import

@page

@media

@font-face

@charset

@namespace

以上内容称为s. 。

@media的一个示例可能有助于进一步说明它：

@media screen and (max-width: 1440px)
{
    span.sizedImage
    {
        height:135px;
        width: 174px;
    }
}    

@media screen and (min-width: 1441px)
{
    span.sizedImage
    {
        height:150px;
        width: 200px;
    }
}

这将根据屏幕的大小有条件地改变图像的大小，在较小的屏幕上使用较小的图像。第一个块将寻址宽度最大为1440px的屏幕；第二个块将寻址大于1440px的屏幕。

这对于在小屏幕上浮动、下拉或滚动的选项卡很有用；在小屏幕上，您通常可以将选项卡标签的字体大小降低一个磅大小，使它们都适合。