css中@属性

1、@keyframe

@keyframes animationname {keyframes-selector {css-styles;}}

• animationname 必需的。定义animation的名称。
• keyframes-selector 必需的。动画持续时间的百分比。
  0-100%
  from (和0%相同)
  to (和100%相同)
• css-styles 必需的。一个或多个合法的CSS样式属性

2、@font-face

@font-face
{
	font-family: myFirstFont;//定义字体名
	src: url('Sansation_Light.ttf')//字体位置
		,url('Sansation_Light.eot'); /* IE9 */
}

div
{
	font-family:myFirstFont;//使用定义字体
}

3、 @media

@media 可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

1. 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

2. 实例

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }
}