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都可以用哦,如下:

1
2
3
4
5
6
7
8
9
<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参考手册,没事扫两眼也是极好的。

为提高准确性本文从mdn英文原文翻译过来(原汉化的有毒),且每个方法都经过测试。。。
具体细节性,经验性的会在后续添加。。。