2016-03-17

CSS3媒体查询

What the FUCK is CSS3媒体查询？

一个document在不同的终端显示效果可能不一样，即可能在不同终端使用不同的css样式，为解决这种问题，HTML4中定义了Media queries(媒体查询)这种机制，即使用media属性区分不同的终端，并由CSS解析媒体查询相关语法，以实现对不同媒体终端使用不同的样式(翔细)。栗子：

1 2	<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">

CSS3媒体查询语法

媒体查询语法是在css2中描述的,CSS3进行了扩展。由1个media_type和0个/多个expressions组成,(翔细)

说白就是@media后面是media_query_list,
media_query_list由0/n个media_query组成，之间用”,”隔开
media_query由一个media_type和0/n个expression组成，
media_type和expression之间，expression和expression之间都用and隔开，
expression由(media_feature：value)形式组成;

哪能用? HTML, XHTML, XML, @import and @media都可以用哦，如下：

<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css">
<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (color), projection and (color)" rel="stylesheet" href="example.css" ?>
@import url(example.css) screen and (color), projection and (color);
@media screen and (color), projection and (color) { … }

语法中的media_type

media_type指媒体类型，指明是打印机(print)啊，还是电视(tv)啊，还是pc显示器(screen)啊，还是吹风机啊(吹风机？)，具体的请打开,下载一个CSS参考手册,没事扫两眼也是极好的。
note:media_type有一些兼容性问题，具体细查css手册。

语法中的media_feature

media_feature指媒体特性，指明是宽(width)啊，高(height)啊，分辨率啊(resolution),帅啊丑啊(什么鬼)，
大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”,如：width会有min-width和max-width.
具体的请打开,下载一个CSS参考手册,没事扫两眼也是极好的。

发动机