CSS3 Media Queries的些野史外传

标签: css相关 css3 media queries transition 动画 | 发表时间:2011-08-23 11:21 | 作者:张 鑫旭 BeerBubble
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=1049

//zxx:本文是去年2010年,也就是去年8月24号一篇写了一半的草稿,正好时隔1年

一、关于Media Queries这货

去年我在制作“CSS3中文在线指南”时第一次见到该属性,当时的兴奋劲堪比路飞看到肉(最近在看海贼王),原来世界上竟有这等CSS属性,因为当时很多精力用在思考自适应布局与宽屏显示器下的页面布局,见此属性立马让我眼前一亮,青春绽放。

用桌面辞典查看其中文释义,貌似是“媒体”+“询问”,我摸一摸我的小胡茬,暗自点头,“原来是寻问媒体媒介的意思啊”,那么这里的“媒介”指哪些,“询问”的又是什么东东呢?这个后面会具体讲。Media Queries也是潜力巨大的CSS3属性,现在的主要用在不同宽度浏览器下不同的布局,以及移动设备上的网页布局。
Media Queries在web上的应用截图 张鑫旭-鑫空间-鑫生活

关于CSS3手册上Media Queries的一些基本属性,您可以狠狠地点击这里:CSS3 media queries使用参考

Media Queries可以针对不同设备的一些Media属性设定不同的CSS属性或者是不同的CSS文件调用。例如:

<link rel="stylesheet" type="text/css" href="widthScreen.css" media="screen and (min-width: 1024px)" />

二、宽屏页面需求与趋势

浏览器的宽屏比例越来越高,不知何时起,宽屏的比例已经超过了普屏。下面的这份文档是支付宝今年4月(2010-04)浏览器与操作系统统计报告,从第九页的内容可以看到,1024*768分辨率的浏览器比例已经下降到1/3,也就是说,现在,绝大多数的用户都是宽屏显示器。

为充分利用宽屏显示器的宽度,同时有兼容一些老的普屏浏览器,我们可以就需要求助于CSS3 Media Queries属性,其中具体的布局使用,这里不予以讨论,网上相关资料有不少。

三、以下是11年8月份完善

去年之所以本文内容没有继续下去是因为我在网上查找CSS3 Media Queries相关资料的时候,发现本来想具体叙述的内容,被CSS3 Media Queries 详解这篇文章抢先1天翻译整理出来了。这被别人嚼过的口香糖吃了多没意思啊,所以,本文就只写了前两段内容,流产了。

不过嘛,经验总是慢慢积累的,我这1年下来使用Media Queries也有些次数,还是可以讲些除了布局之外,其他有用或没用的杂碎信息。

1. min-width和max-width的含义
可能有人会对@media only screen and (max-width: 1024px) {}@media only screen and (min-width: 1024px) {}的意思理不清。max-width表示最大宽度,也就是说在不超过该宽度下的情况下执行。所以@media only screen and (max-width: 1024px) {}表示的含义是:当浏览器的宽度小于1024像素的时候,花括号里面的CSS样式其作用。例如:

@media only screen and (max-width: 1024px) {
    body { background-color: blue;}
}

上面的CSS所代表的含义就是,当浏览器的宽度小于1024像素的时候,也就是窄屏的时候,body标签的背景色是蓝色。相对应的,min-width则表示大于这个宽度的时候,各回各家,各找各妈~~

2. YUI compressor下Media Queries的问题
使用YUI compressor压缩CSS的时候,如果你的YUI compressor还是几年之前的那个版本,可能会出问题,你会发现CSS样式中的Media Queries直接被无视的。究其原因是因为YUI compressor将and后面重要的空格给抹掉了。例如:

@media only screen and (max-device-width:480px) {
    body {background:#fcc;}
}

压缩之后就是:

@media only screen and(max-device-width:480px){body{background:#fcc}}

要解决此问题,很简单,下个最新的YUI compressor就可以了,您可以去这里下载。新下载的YUI compressor就无需重新配置路径,Java home之类,直接覆盖yuicompressor.jar这个文件就完事大吉了。

3. Media Queries配合transition属性下的动画效果
CSS3 Media Queries属性除了在不同尺寸布局上大放光彩外,还可以触发CSS3的transition属性动画效果。

您可以狠狠地点击这里:Media Queries和transition 双剑合璧下效果(IE10+、最新的Firefox,Chrome之流)

可以看到,在宽屏下,图片宽度是200像素的宽度,当我们改变浏览器宽度小于1024像素的时候,所有的图片一起以动画的形式缩小成150像素的宽度。
CSS3 Media Queries和CSS3 transition属性下的动画效果

响应的CSS代码如下:

.demo img {
    width: 200px;
    -webkit-transition: width 2s ease;
    -moz-transition: width 2s ease;
    -o-transition: width 2s ease;
    -ms-transition: width 2s ease;
    transition: width 2s ease;
}
@media only screen and (max-width: 1024px) {
    /*浏览器宽度小于1024时,图片宽度150px*/
    .demo img {
        width: 150px;
    }
}

4. Media Queries属于画龙点睛之笔
对于大部分的企业,人力资源有限。我们也都知道,一个页面如果要维护两种不同的样式,显然要比单纯一个样式要吃力些。Media Queries属性从某种意义上讲就是针对不同宽度的浏览器下不同的CSS代码(这不同于宽度自适应的流体布局)。因此,为了我们有更多喝下午茶的时间,Media Queries切不可滥用,应充分挖掘CSS属性本身的潜力。在我看来,Media Queries属于画龙点睛的东西,万不可当卫生纸一样。例如,导航的垂直布局和水平布局,我们只需要在宽屏下,使用Media Queries让导航所在的nav元素有个适当的宽度就可以了,至于其他布局的细节,全都交给CSS本身去完成吧。这才叫“画龙点睛”。

其他欢迎补充……

//zxx:偶今天下午开始年假,本周停止更新,邮件啊恕我要下周才能回复

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1049

(本篇完)

有话要说,点击这里发表评论。

相关 [css3 media queries] 推荐:

HTML5实践 -- CSS3 Media Queries

- - 博客园_首页
  转载请注明原创地址: http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html.   demo查看地址: http://www.webdesignerwall.com/demo/media-queries/.   CSS2允许你对特定media类型制定样式,例如针对屏幕或者打印机.

CSS3 Media Queries的些野史外传

- BeerBubble - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1049. //zxx:本文是去年2010年,也就是去年8月24号一篇写了一半的草稿,正好时隔1年. 一、关于Media Queries这货. 去年我在制作“CSS3中文在线指南”时第一次见到该属性,当时的兴奋劲堪比路飞看到肉(最近在看海贼王),原来世界上竟有这等CSS属性,因为当时很多精力用在思考自适应布局与宽屏显示器下的页面布局,见此属性立马让我眼前一亮,青春绽放.

伪类+js实现CSS3 media queries跨界准确判断

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2387. 我们都知道,CSS3 media queries是 响应布局实现之利器. 国外很多著名的前端站点,如 css-tricks, smashingmagazinegazine等都采用了响应布局.

CSS3 Media Queries在iPhone4和iPad上的运用

- - Web前端 - ITeye博客
那么以后大家在iPhone4和iPad设备上,就可以按照横竖板来定样式了:. 上面四种CSS3 Media Queries就是用来对付iPhone4和iPad的,至于其他的运用,大家参考下面我重新整理的CSS3 Media Queries模板:. CSS3 Media Queries 模板:. 1、Smartphones (竖板和横板).

CSS Media Queries 模板

- - blog.moocss.com
CSS Media Queries 模板. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60.

CSS3 Media Queries 详细介绍与使用方法,Responsive Web Design 必备技术

- - Web前端 - ITeye博客
上一篇我们介绍了 Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到 Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成. 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援.

CSS4 Media Queries 新特性

- - 葵中剑's Blog - SwordAir.com
来自 css3.info 的消息,CSS4 Media Queries 已经成型,尽管它现在还只是一份 编辑草案,不过我们仍然可以从中看到新的 Media Queries 所具备的特质. 在 Changes Since the Media Queries Level 3 一节里,就能看到 CSS4 Media Queries 的新特性.

Respond.js – 让不懂爱的 IE6-8 支持 CSS3 Media Query

- - 博客园_梦想天空
  Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供多媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design). 20个非常绚丽的 CSS3 特性应用演示.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

ROI Media:反思网站设计

- - 中文互联网数据研究资讯中心
现在谁都可以轻松做一个网站,但根据ROI Media,只有4.13%的网站具备有效的HTML和CSS,更让人担忧的是只有40%的用户能在站点上找到他们需要的信息,这可能是用户自己的错,但也可能是由于糟糕的设计. Tencent CDC:工具型网站首页的设计思考. Hubspot:网站首页12大元素--信息图.