CSS 中 @ 用法详解

PHP中文网 JavaScript 122 0 百度已收录

当前第2页 返回上一页

代码如下:

1

2

3

4

5

6

7

8

@keyframes pulse {

0% {

background-color: #001f3f;

}

100% {

background-color: #ff4136;

}

}

@media
这个规则包含条件声明，可用于为特定屏幕指定样式，这些声明可以包含屏幕大小，在适屏样式中会很有用.

代码如下:

1

2

3

4

5

6

7

/* iPhone in Portrait and Landscape */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px)

and (-webkit-min-device-pixel-ratio: 2) {

.module { width: 100%; }

}

或者只在文档打印时运用样式

代码如下:

1

2

@media print {

}

@page
这个规则为将要打印的单独页面定义样式。特别的是，它能为页面伪元素设置外边距：:first、:left和:right

代码如下:

1

2

3

@page :first {

margin: 1in;

}

@supports
这个规则可测试浏览器知否支持某个特性/功能，如果满足条件，将会为这些元素应用特定样式。有点像Modernizr,但确实是CSS属性。

代码如下:

1

2

3

4

5

6

7

8

/* Check one supported condition */

@supports (display: flex) {

.module { display: flex; }

}

/* Check multiple conditions */

@supports (display: flex) and (-webkit-appearance: checkbox) {

.module { display: flex; }

}

总结

at-rule可以使CSS做一些疯狂有趣的事情。尽管文章中的示例很基础，但是可以看到，对于特定的条件，它们是如何使用样式的，从而创建匹配特定场景的用户体验和交互。

推荐教程：《CSS教程》

以上就是CSS 中 @ 用法详解的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

css calc()有啥用

如何使用css让背景图片不重复

css盒子模型尺寸如何计算

css border-image-slice属性怎么用

css font-variant属性怎么用

css层叠性重要么

css right是什么意思?

css该如何隐藏文本框

css如何实现自适应分隔线？方法介绍

css right属性怎么用

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...

    正在狠努力加载，请稍候...