@media 用法：

@media: <sMedia> {sRules}

<sMedia>，设备名称：

　　all：所有设备。

　　aural：用于语音和音乐合成器。

　　braille：用于触觉反馈设备。

　　embossed：用于凸点字符 印刷设备。

　　handheld：小型或者手提设备。

　　print：打印机。

　　projection：投影图像。

　　screen：计算机显示器。

　　tty：用于使用固定间距字符格的设备，如电传打字机和终端。

　　tv：电视类设备。

sRules：规则，太多了。。不一一列出了，主要参数：

　　media_query:设置逻辑关键字 and not only 等

　　media_type:设备；类型。

　　media_feature:定义媒体特征。放置在一对圆括号内，如(min-width: 400px)。

例如：

@media screen and (max-width: 600px) {} /*视图窗口的宽度小于600像素*/

@media screen and (max-device-width: 480px) {} /*iPhone设备 设备最大宽度为480像素*/

<link rel='stylesheet' href='aa.css' media="only screen and (max-width: 300px)"  />

 

CSS投影 reflect

-webkit-box-reflect: <direction> <offset> <mask-box-image>

<direction>: 反射方向，above below left right 。

<offset>: 反射偏移距离。

<mask-box-image>:定义遮照图像。

例如：

-webkit-box-reflect: right 20px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));