原文链接:Introduction to CSS3 Media Queries

原文日期: 2014年2月21日

翻译日期: 2014年2月26日

翻译人员: 铁锚

简介

随着移动设备的日益普及,web开发人员需要确保他们的网站在不同的设备上都能良好展现。在显示时的一个重要手段就是为不同的设备应用不同的CSS规则。为此CSS3媒体查询(media queries)允许您根据不同的媒体类型及其功能应用不同的CSS规则。本文探讨CSS3媒体查询是什么以及如何在您的web页面中使用它们。

CSS3 Media Queries概述

要了解CSS3媒体查询,让我们假设您希望创建一个web页面,可以由台式电脑以及移动设备访问。PC机访问您的web页面时将使用一个功能丰富,分辨率和颜色都得到良好支持的屏幕设备。在这样的设备上你可以很容易地显示三列布局,中间列用来显示web页面的核心内容,剩下的两列则可以显示一些辅助内容或广告。如果同样的web页面由智能手机访问,你不能使用这样的布局,因为屏幕的宽度和高度是有限的。在这种情况下,您可能只想显示由核心内容组成的一列。除了布局以外还可以调整字体大小和颜色等其他方面。这需要根据不同的请求设备运用不同的CSS规则。这就是CSS3媒体查询的用武之地。使用CSS3媒体查询您可以指定媒体类型和功能的列表,如果请求设备符合指定的标准CSS规则,则将接下来的规则应用于web页面并显示给用户。不仅仅是CSS规则,你也可以根据请求设备切换整个样式表。

下面的图片显示了同样的web页面在桌面电脑和iPhone(实际上是通过Safari桌面浏览器模拟)上如何显示。

图1 网页在PC端与iPhone上的对比

这两种界面都包含同样的 <div> 元素。第一个是桌面显示效果,而第二个是移动版本效果。这种变化是通过CSS3媒体查询实现的。

媒体查询(media query)可以使用媒体类型和媒体特性。媒体类型表明目标设备类型。媒体类型包括:

  • all (所有设备类型)
  • screen (电脑屏幕)
  • handheld (手持设备)
  • tv (电视类型设备)

媒体特性包括一些参数:

  • 浏览器窗口的最大,最小尺寸(width and height)
  • 屏幕的宽高(width and height)
  • 屏幕方向(landscape or portrait)

现在你对媒体查询有了一些基本的了解,让我们继续学习如何编写媒体查询。

编写 Media Queries

正如前面所提到的,我们可以通过两种方式来使用CSS查询。第一种是将编写的媒体查询置于 <link> 标签中,当媒体查询表达式计算为true时,会加载指定的样式表,或者可以将编写的媒体查询放置在样式表文件内,当媒体查询表达式计算为true时就会应用相应的CSS规则。

让我们先看看如何编写媒体查询放置在一个样式表文件中。这种技术需要使用 @media CSS规则。要了解 @media 的使用,请创建一个新的HTML页面并添加以下标记:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <div class="mycontent">
        Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
        Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
        Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
        Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!
    </div>
</body>
</html>

上面的页面包含一个<div>元素,并附有mycontent
CSS类。<div>包含了一些测试内容。 mycontent CSS类定义在 StyleSheet1.css中。因此,创建一个新的样式表并命名为StyleSheet1.css。然后添加CSS样式规则:

@media (min-width: 1000px) {
  .mycontent
  {
    width:500px;
    background-color:#ffd800;
    color:#ff0000;
    border:2px solid red;
    padding:5px;
  }
}

@media (max-width: 600px) {
  .mycontent {
    width:200px;
    background-color:#00ff90;
    color:navy;
    border:2px solid darkblue;
    padding:2px;
  }
}

上面的CSS定义了两个媒体查询。第一个媒体查询检查是否min-width属性至少600像素。min-width属性指明设备上可见区域的最低要求。在上面的例子中,如果这最低可见面积大于1000 px,则指定的 mycontent CSS类规则将应用于<div>元素。第二个媒体查询使用
max-width 属性。最大宽度属性表明,如果查看面积小于600 px,将应用接下来的CSS规则。

在台式电脑上测试上面的媒体查询,在浏览器(例如Chrome)中打开web页面,将浏览器窗口最大化,以便查看面积大于1000 px。下图显示了在这种条件下web页面的样子:

图2 宽度大于1000 px

现在,改变浏览器窗口的大小直到小于600 px,则显示内容应该改变为下面的样子:

图 3 宽度小于 600 px

当然,目前我们还没有考虑查看区域在600px - 1000px之间的情况,但是你可以轻易地为这些情况下提供一个默认mycontent类。

在上面的媒体查询中,没有显式地为 "all" 指定媒体类型。

当然你也可以使用媒体类型来实现等价的效果:

@media screen and (min-width: 1000px) {
  .mycontent
  {
    width:500px;
    background-color:#ffd800;
    color:#ff0000;
    border:2px solid red;
    padding:5px;
  }
}

@media screen and (max-width: 600px) {
  .mycontent {
    width:200px;
    background-color:#00ff90;
    color:navy;
    border:2px solid darkblue;
    padding:2px;
  }
}

可以看到,上面的查询使用了媒体类型
screen 以及 媒体特性min-width和max-width.

您还可以在媒体查询中指定多个条件。例如,您可以编写以下媒体查询来兼容查看区域 在600 px - 1000 px之间的情况。

@media (min-width: 600px) and (max-width:1000px) {
  .mycontent {
    width:350px;
    background-color:#ff00dc;
    color:navy;
    border:2px solid #4800ff;
    padding:2px;
  }
}

可以看到上面的媒体查询组合了 min-width和max-width参数。如果你调整浏览器窗口,当查看区域处于上述范围时你会看到显示效果如下:

图 4 宽度在 600 px - 1000px之间

在上面的例子中使用了可见区域的宽度。如果你想使用屏幕的尺寸来检查,你可以使用max-device-width 和 max-device-height参数。要了解更多媒体查询细节, 请点击这里。

使用媒体查询切换样式表

在前面的例子中,你使用单个样式表来管理不同媒体查询。有时你可能需要对不同的媒体特性使用完全不同的样式表。例如,您可能有一个用于大屏幕尺寸的样式表。其中是针对台式电脑的 字体、字体大小、颜色和整体布局样式。另一方面你可能对移动设备上的web页面定义了完全不同的外观和感觉,如字体、字体大小和布局元素。在这种情况下将各自的风格放在不同的样式表文件中更整洁也更容易维护。

要让浏览器应用哪个样式表,您需要指定一个媒体查询到web页面的<link>元素中。考虑使用以下标记:

<link href="StyleSheet2.css" rel="stylesheet" media="screen and (min-width: 1000px)" />
<link href="StyleSheet3.css" rel="stylesheet" media="screen and (max-width: 600px)" />

上面的标记告诉浏览器,如果媒体查询中指定的媒体属性计算为true则使用StyleSheet2.css。在这种情况下,媒体查询检查请求设备可视面积是否大于1000 px。第二行的标记指定如果可视面积小于600 px,则应用StyleSheet3.css。

从上面的例子可以看到,媒体查询中提到的媒体属性与你早些时候使用的 @media是相同的。 要测试媒体属性,将mycontent CSS类的两个版本放置在两个样式表中(StyleSheet2.css和StyleSheet3.css),然后在主网页添加上面的标记。如果您在浏览器中打开web页面,你应该得到与之前判断浏览器尺寸时相同的结果。

总结

CSS3媒体查询允许您基于媒体类型(media type)和媒体特性(media features)应用CSS规则。这使得根据请求设备应用不同的CSS规则变得容易。诸如设备尺寸,可视区域和屏幕方向等媒体特性,可以使用媒体查询进行测试。总的来说,媒体查询是一个受欢迎的CSS新功能,为移动设备开发网站的web开发人员将会发现这个功能特别有吸引力。

相关阅读

Using CSS3 to Jazz up your Web Forms

Creating a Complete Web Page With HTML5

CSS3 Media Queries 简介的更多相关文章

  1. 移动终端学习1:css3 Media Queries简介

    移动终端学习之1:css3 Media Queries简介 1.简介 这篇文章写的不错,我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-qu ...

  2. 移动终端学习一:css3 Media Queries简介

    移动终端学习之一 css3 Media Queries简介 1.简介 别人写过的我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-querie ...

  3. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  4. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  5. CSS3 Media Queries 片段

    CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

  6. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  7. CSS3 Media Queries模板

    使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (m ...

  8. CSS3 Media Queries在iPhone4和iPad上的运用

    CSS3 Media Queries的介绍在W3CPlus上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少.前几天在<修复iPhone上submit按钮bug>上介绍了 ...

  9. Css3 Media Queries移动页面的样式和图片的适配问题(转)

    CSS3 Media Queries 摘自:http://www.w3cplus.com/content/css3-media-queries Media Queries直译过来就是“媒体查询”,在我 ...

随机推荐

  1. Linux Mint 17一周使用体验

    1 Win7下安装Mint双系统 Linux Mint支持直接从Win7硬盘引导安装,非常方便,不用制作U盘引导,更不用刻盘安装了.Mint有Cinnamon和Mate两种桌面,听说Mate更加简洁节 ...

  2. 这是最好的时光，这是最坏的时光 SNAPSHOT

    好久没动笔了,上次憋了好几天码出的文字扔出去,石沉大海,没惊起半点涟漪.这次真不知道能憋出个什么鬼,索性就让思绪飞扬,飞到哪是哪! --题记 此处应有BGM: 少年锦时 赵雷 1.以后真没有暑假喽 2 ...

  3. Programming In Scala笔记-第十一章、Scala中的类继承关系

    本章主要从整体层面了解Scala中的类层级关系. 一.Scala的类层级 在Java中Object类是所有类的最终父类,其他所有类都直接或间接的继承了Object类.在Scala中所有类的最终父类为A ...

  4. 查看oracle数据库的连接数以及用户 （转：http://blog.itpub.net/24558279/viewspace-752293/）

    select2.查询oracle的并发连接数4select3.查看不同用户的连接数6select4.查看所有用户:8select5.查看用户或角色系统权限(直接赋值给用户或角色的系统权限):10sel ...

  5. Redis 4.0新功能介绍

    Redis 的作者 antirez 在三天之前通过博客文章<The first release candidate of Redis 4.0 is out>发布了 Redis 4.0 的第 ...

  6. Makefile常用函数总结

    在Makefile中可以使用函数来处理变量,从而让我们的命令或是规则更为的灵活和具 有智能.make所支持的函数也不算很多,不过已经足够我们的操作了.函数调用后,函 数的返回值可以当做变量来使用. 一 ...

  7. springMVC+Hibernate4+Spring整合一（配置文件部分）

    本实例采用springMvc hibernate 与 spring 进行整合, 用springmvc 取代了原先ssh(struts,spring,hibernate)中的struts来扮演view层 ...

  8. Effective C++ ——实现

    条款26:尽可能延后变量定义式的出现时间 当你定义一个变量的时候就要保证这个变量能够在程序中使用到,不要定义无意义的变量,这样就要求我们最好是在变量使用到的时候才做定义,因为如果一个变量定义了却不使用 ...

  9. tomcat中Servlet的工作机制

    在研究Servlet在tomcat中的工作机制前必须先看看Servlet规范的一些重要的相关规定,规范提供了一个Servlet接口,接口中包含的重要方法是init.service.destroy等方法 ...

  10. windows与linux的文件夹共享

    公司配备了一台性能还算不错的电脑,不过是台式机.我在上面装了ubuntu,但是我的代码工作目录全部都在我自己的win7笔记本上.有时程序开多了就容易卡,于是想到用装ubuntu的台式机来访问我win7 ...