@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- 400px)。
例如：
@media screen and (max- 600px) {} /*视图窗口的宽度小于600像素*/
@media screen and (max-device- 480px) {} /*iPhone设备 设备最大宽度为480像素*/
<link rel='stylesheet' href='aa.css' media="only screen and (max- 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));