CSS3 Media Queries (媒体查询)

在 Kayo 之前所写的文章《前端开发之响应式设计》中, Kayo 曾经简单介绍过 CSS3 的 Media Queries (媒体查询)的用途和使用方法,本文则主要介绍 Media Queries (媒体查询)的具体属性,在开始介绍具体的属性之前,首先引用前文的一段内容重新简单介绍一下 Media Queries (媒体查询):

 

“ Media Queries 可以根据特定条件来调用不同的 CSS 文件,这样我们给手机、平板等分辨率较低的设备调用另外的 CSS ,对网页布局进行调整便可以实现更为完整的响应式设计了。

 

使用 Media Queries 可以直接在 CSS 文件内调用,假设为浏览环境宽度在480以内的手持设备, id 为 box 的元素调用一条额外的 CSS 可以这样写:

@media handheld and (max-width: 480px){
    #box{}
}

 

另外也可以在 HTML head 标签内直接调用一个 CSS 文件:

<link rel="stylesheet" href="./css/mobile.css" media="handheld and (max-width: 480px)">

 

一.Media Type

接下来再详细介绍一下 Media Queries ,而介绍 Media Queries ,就不得不先介绍 Media Type 了。

 

在 CSS2 中,有 Media Type 这一属性,用于给不同的设备指定特定的 CSS 样式,从而使用网页界面更加适应不同的设备。其中较为常用的 Media Type 有“all”, "screen", "print" , 分别用于给所有设备,电脑屏幕,文档打印或打印预览模式指定样式。

 

1.Media Type 完整可取属性

 

英文好的童鞋可以参考 w3c 英文原版的 Media Queries 所有可取属性说明。

 

2.Media Type 浏览器支持

虽然 Media Type 的类型有很多,但主流浏览器对于它们的支持并不完善,除了 Opera 完全支持 Media Type 外,其他现代浏览器一般只支持 "all", "screen", "print" 三个较为常用的属性,另外 IE 6/7 不支持在 @import 中使用媒体类型。

 

二.Media Queries

这时我们再看回上面的例子,例子中使用了 handheld and (max-width: 480px) 这样的一条 Media Queries ,而其中的 handheld 正是 Media Type 的手持设备类型,后面的 max-width 则是 CSS 条件判断,由此可见, Media Queries 正是 Media Type 的“升级版”,由 Media Type 与 CSS 条件判断组合而成。

 

在例子中, Kayo 使用了一个 CSS 条件判断 max-width: 480px ,也就是指定最大宽度为 480px 的设备。多个条件用 and 关键词连接,例如:

<link rel="stylesheet" href="./css/mobile.css" media="handheld and (min-width: 480px) and (max-width: 1020px)">

这个例子是指定宽度在 480px 到 1020px 之间的手持设备适用 mobile.css 这个样式表。

 

另外对多条规则可以用逗号隔开:

<link rel="stylesheet" href="./css/other.css" media="handheld and (max-width: 480px), screen and (min-width: 1020px)">

这个例子是指定最大宽度为 480px 的手持设备与最小宽度为 1020px 的屏幕设备适用 other.css 这个样式表。

 

另外还有 not 与 only 两个关键字,分别用于排除某特定的媒体类型与指定某特定的媒体类型,用法与 and 相似,这里就不举例了。

 

1.Media Queries 完整可取属性

 

也可以参考 w3c 英文原版说明。

 

2.Media Queries 浏览器支持

  • IE 9- 不支持
  • Firefox 3.5+ 支持
  • Opera 9.5+ 完全支持
  • Opera mini 5 支持
  • webkit 支持(chrome 5+ 开始支持, safari 3+ 开始支持)
  • iPhone 4 开始支持 orientation 属性

 

三.总结

在作了上面的介绍后, Kayo 作一个简短的总结。 Media Queries 可以很方便的为特定设备指定样式,另外手持设备对于 Media Queries 具有良好的支持(更胜于 PC),因此 Media Queries 可以为手持设备带来很多设计上的方便——解决多分辨率问题(为不同的分辨率应用特定的 CSS ,优化页面),再进一步,我们可以对网页结构作出一些弹性的设计,并利用 Media Queries 为不同的设备应用特定 CSS ,让网页对于不同的设备有更好的适应,这个也就是响应式设计很重要的一个技术支持,关于响应式设计的具体情况可以参见前文 《前端开发之响应式设计》。

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/css3-media-query.html

评论列表

  • 评论者头像
    回复

    小白路过

  • 评论者头像
    回复

    Kayo大師,請教一個問題
    waikatotkd.co.nz
    如果我想要在slide照片擺一個固定的文字板塊(有一段固定介紹的文字),只有在home page才會出現的,我應該怎麼做?

    • 评论者头像
      回复

      @班森 我是普通的Kayo了,大师之路还远呢! :mrgreen:

      可以使用is_home判断首页才输出,例如:
      <?php if ( is_home() ) { ?>
      // 文字板塊
      <?php } ?>

      • 评论者头像
        回复

        @Kayo
        哈哈哈哈,寫得我看不懂得我就會叫大師
        恩,我的問題正確來說應該是,怎樣是可以把他做成文字板塊?
        因為現在照片下面是每次有新的post就會renew,我想要的是照片跟post中間多一個區域可以放置一段固定的文字..這該怎麼寫??
        真的麻煩你了XD

        • 评论者头像
          回复

          @班森 噢噢,突然懂了,上面的网址应该是waikatostud.co.nz这个吧?

          • 评论者头像
            回复

            What Chicago really needs to do is build more islands and peaiusnlns in Lake Michigan. Why fight over Meigs Field when you can build more of them, as Toronto has done?

  • 评论者头像
    回复

    :wink: 大师。

  • 评论者头像
    回复

    端午节快到了,提前送你祝福:工作“粽”被领导夸奖,生活“粽”是多美梦,钱财“粽”是赚不完,朋友“粽”是很贴心,笑容“粽”是把你恋!随心祝博主端午节快乐!Y(^_^)Y

  • 评论者头像
    回复

    这个我之前刚接触过,蛮好用的,不过兼容性写法上面还有很多差异 :mrgreen:

  • 评论者头像
    回复

    屏幕真多,移动兼容也是麻烦

    • 评论者头像
      回复

      @牧风 相对桌面兼容已经不错了,起码一些较新的标准大部分移动浏览器都有不错的支持

  • 评论者头像
    回复

    怎么有点心情不好,

  • 评论者头像
    回复

    嘻嘻,都是技术相关的呢 :-|

  • 评论者头像
    回复

    收藏备用

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O