让我们来学学css3 media queries的使用吧

这几天就是在折腾博客，换肤，使用pretty code，css3技巧，以及响应式布局实践。

不过，响应式布局确实挺费时间的。对此，把自己实践的经验分享下。内容将涉及如下：

语法
语法注意的事项
响应式适用的范围
一些实例演示
其他问题

好啦。这就是要讲的内容，不过，在开始之前，我们先热热身。

先声明html文档为html5的文档类型，即<!DOCTYPE　HTML>

IE9版本以下浏览器不支持media queries规则，所以请加入以下条件注释的js

<!--[if lt IE 9]>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

对手持设备的支持声明：

<meta name=“viewport” content=“width=device-width,minimum-scale=1.0,maximum-scale=1.0″ />

好啦，然后了解下css3 中的media queries的一些简单规则，就可以随心所欲啦。

一. 语法

viewport的语法

width: 手机模拟PC浏览器的宽度，然后手机浏览器根据这个宽度把页面同比缩放到手机屏幕上。width:的特殊值device-width的是设备宽度；
height：同width；
user-scalable：是否允许用户缩放，有yes和no两个值；
initial-scale：初始缩放比例；
minimum-scale和maximum-scale:最小和最大缩放比例；

media queries的规则

首先，这里涉及的基本翻译自：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries，并且舍弃了一些原英文中的废话，所以不会有错的哦，除非本人翻译不够专业。

-------------------分割线------------------------------

语法：

media query（媒介查询）由媒介类型和媒介特性组成，作为css3的规范，包含一个或多个表达式，用以解决不同的媒介适配问题。当文档显示完成之时，指明了媒介设备类型，表达式没有错误的话，那么查询结果也就正确了（就是规则正确响应了）。

css 代码：

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
 
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

若media query正确，那么相应的样式表或者样式规则（怎么会有或？因为使用响应式，可以分好多外链css文件，也可以只写在一个样式表中，本人就喜欢写在一张样式表中）就会被请求，跟正常的级联规则一样样的。Style sheets with media queries attached to their <link> tags will still download even if their media queries would return false (they will not apply, however).尼玛，不会翻译了。

若不声明媒介类型，比如使用not，only运算符，那么默认是所有媒介。

逻辑运算符：

关键字	说明
only	限定某种设备类型
and	逻辑与，连接设备名与选择条件、选择条件1与选择条件2
not	排除某种设备
,	设备列表

使用逻辑运算符 not，and，only，可以构建复杂的media queries。注意，在使用not和only时，必须指明媒介类型。

使用逗号“,”可以合并多个media queries，其实这跟css选择符是一个道理，多个选择符应用统一规则，就用逗号合并。

and：

用来连接多种媒介特性(media features)以及媒介类型(media types)。一个简单的media query示例：

@media (min-width: 700px) { ... }

但是，如果你想让上面的规则仅仅是竖屏显示的话，你可以使用and运算符连接媒介特性。

@media (min-width: 700px) and (orientation: landscape) { ... }

当然，如果你怕在TV上显示出岔子，也可以做如下限制：

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

现在，上面的media query规则将只会对媒介类型是TV，可视宽度至少为700px，竖屏进行响应。

逗号：

懒得去翻译那一长串了，写过css的都明白，这里的逗号，跟不同的css选择器应用同一样式的逗号是一样的。给出对比：

.music img , .news img { height: 40px; width: 60px;}

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

上面的规则呢，如果你拿了个800px宽的电脑屏设备，那么@media (min-width: 700px)这个规则会被应用，虽然你这个不是手持设备；如果你拿了个500px宽的手持设备，handheld and (orientation: landscape)这个规则会被应用，虽然你丫的屏宽还不到700px。（为何不用or呢，我比较纳闷儿！）

not：

not关键字将会作用域整个的media query，除非有其他情况致使该media query返回错误,比如，单色monochrome作用于彩色（color）显示，或者600px的screen屏和一个min-width:700px的特性查询(feature query)
若有逗号分隔，那么not只能作用在逗号前面的media query上
not关键字不能用来否定单个的feature query，只能否定整个media query

下面来看代码示例：

@media not all and (monochrome) { ... }

以上代码就相当于：

@media not (all and (monochrome)) { ... }

而不是：

@media (not all) and (monochrome) { ... }

再看看另一个示例：

@media not screen and (color), print and (color)

就相当于：

@media (not (screen and (color))), print and (color)

这个否定规则，可以参考否定的第二条，逗号的作用。

only：

我原先还以为only就是仅仅的意思，那如果是“仅仅”，我指定media type，或者 media feature，也不需要only啊，多此一举。好吧，看看官方解释：

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:
<link rel="stylesheet" media="only screen and (color)" href="example.css" />

什么意思呢，就是说，only关键字啊，是阻止那些不支持media queries,media feature的老古董浏览器请求已给出的样式。你丫是穷屌丝，就只能对白富美望而却步了。

哎，就是这个意思么，有事儿没事儿加上吧。

-----------------------再次割鸡鸡----------------------------

上面说了一大堆，有两个专业名词，一个是media types，一个是media feature，下面列出来，让你们端详端详。

媒介类型（media types）：

类型	解释
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯
screen	彩色电脑屏幕
speech	演讲
tty	固定字母间距的网格的媒体，比如电传打字机
tv	电视

媒介特性(media features)：

媒体特性	值	可用媒体类型	接受min/max	简介
width	<length>	视觉屏幕/触摸设备	yes	定义输出设备中的页面可见区域宽度(单位一般为px)
heigth	<length>	视觉屏幕/触摸设备	yes	定义输出设备中的页面可见区域高度(单位一般为px)
device-width	<length>	视觉屏幕/触摸设备	yes	定义输出设备的屏幕可见宽度(单位一般为px)
device-heigth	<length>	视觉屏幕/触摸设备	yes	定义输出设备的屏幕可见高度(单位一般为px)
orientation	portrait \| landscape	位图介质类型	no	定义’height’是否大于或等于’width’。值portrait代表是，landscape代表否即设，备手持方向：portait为横向，landscape为竖向
aspect-ratio	<ratio>	位图介质类型	yes	定义’width’与’height’的比率，即浏览器的长宽比
device-aspect-ratio	<ratio>	位图介质类型	yes	定义’device-width’与’device-height’的比率，即设备屏幕长宽比。如常见的显示器比率：4/3， 16/9，16/10
color	<integer>	视觉媒体	yes	定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
color-index	<integer>	视觉媒体	yes	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
monochrome	<integer>	视觉媒体	yes	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
resolution	<resolution>	位图介质类型	yes	定义设备的分辨率。如：96dpi，300dpi，118dpcm
scan	progressive \| interlace	电视类	no	定义电视类设备的扫描工序， progressive逐行扫描，interlace隔行扫描
grid	<integer>	栅格设备	no	用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否

二. 语法注意的事项

一个以上的响应式规则，媒体属性设置后面如有宽度规则，必须使用and连接，否则，将只使用最后一个规则中的相同样式（不同规则的选择器交集的样式）。
只设置了最大宽度值的样式设置将会被继承。以上代码中的1280px下的border属性将会被1280px宽度以下的规则继承。对于这种情况，可以使用min-width和max-width配合，防止继承，以减少属性覆盖产生的一些麻烦。比如，float属性还有none，好覆盖，但是position:relative你怎么覆盖？蛋疼吧。针对这种情况，可以采取宽度区间段设置的方式，把差异化的样式放在这个区间段声明中就OK啦。
如果只设置max-width为m像素，小于m的设置则是在一个区间，即该设置包含了最小到最大的设置，那么是否会继承max-width为m像素的设置的样式呢？会继承的。
DOCTYPE设置。DOCTYPE设置需要设置成DOCTYPE HTML，其他设置方式将导致在手持设备上无法响应。当然，电脑上还是可以响应的。比如我的这个博客，博客园采用的是过渡式的声明，我就只好限制响应规则的设备为screen了。

三. 响应式适用的范围

我个人觉得适合做页面内容不太丰富，结构不复杂的项目。如果只是针对电脑屏的话，任何项目都不限，只要折腾得起，不差钱和时间。

对于手机来说，隐藏的内容越多，就越不合适了。因此，博客和论坛还是比较合适的。

四. 一些实例演示

可以参照本博客，或者国外的这个站点http://blog.teamtreehouse.com/。

一淘网的首页也做了响应式处理，不过他们针对的是screen，最小宽度为768px，对于手机，则另做了。

五. 图片的自适应

前景图片img怎么自适应呢？常见的做法是：

img { max-width: 100%; }

另外，记得不要在img元素中限定图片宽高哦。另外不建议直接设置width=”100%”，因为会把小图拉大，模糊显示。

同理，video标签和iframe标签的宽度也可以这样做，而且最好不要使用iframe，宽度是个问题，性能也是一个方面吧。

另外一种做法是使用css3 image

我们都知道可以用::before和::after伪元素+content属性来动态显示一些内容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不过content属性在CSS 2.1中只能用于这两个伪元素中，而在CSS3中，任何元素都可以使用content属性了，这个方法就是结合css3 的attr属性和HTML自定义属性的功能：

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

然后用media query来动态赋值：

@media (min-device-width:600px) { 
    img[data-src-600px] {
        content: attr(data-src-600px, url); 
    }
}
@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

不爽的是，你得准备多张图片啊。。。

背景图咋自适应呢？我看只能准备多张图片了。

参考文章：

posted @ 2013-05-30 10:41 xmlovecss 阅读(1503) 评论(0) 编辑收藏举报

刷新页面返回顶部

xmlovecss

严谨，细致，追求简洁，热爱css。