免费下载案例集|20+数字化领先企业人才培养实践经验 了解详情
写点什么

媒体查询简介——第 1 部分:什么是媒体查询?

  • 2011-12-21
  • 本文字数:5735 字

    阅读完需:约 19 分钟

目录

要求

必备知识

熟悉 CSS。

用户级别

中级

必需产品

范例文件

注意:这是 Donald Booth 最初编写的一篇文章的更新和扩展版。

移动设备的快速普及完全颠覆了 Web 设计领域。用户不再仅在传统桌面系统上查看 Web 内容,他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。Web 设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错,在小型的电话以及介于它们之间的各种设备上看起来也不错。

媒体查询是向不同设备提供不同样式的一种不错方式,它为每种类型的用户提供了最佳的体验。作为 CSS3 规范的一部分,媒体查询扩展了 media 属性(控制您的样式应用方式)的角色。例如,多年来人们常常使用一种独立的样式表,通过指定 media="print"来打印网页。媒体查询将这一理念提升到了更高层次,允许设计人员基于各种不同的设备属性(比如屏幕宽度、方向等)来确定目标样式。图 1-3 演示了媒体查询的实际应用。它们显示了相同网页在桌面浏览器中、平板电脑上和 iPod touch 上查看的效果。

图 1. 当在桌面上查看时,该网页拥有一种两栏布局。

在桌面版本中,该网页拥有一种固定宽度、两栏的布局。但当在平板电脑上查看相同页面时,边栏将移动到主要内容下方。

复制代码
<link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 649px)" >

图 2. Media Queries 对话框

当在 iPod touch 中查看时,菜单会重新排列,图像会缩小。使用媒体查询为每种设备提供了不同的样式。

图 3. 媒体查询重新设置页面的样式,以适应小得多的屏幕的限制。

本文概述媒体查询,包含将帮助您快速开始自己的多屏幕网站开发的示例。

注意:确保也查阅了 Adobe TV 上的以下视频:“Dreamweaver 中的 CSS3 媒体查询”和“媒体查询如何使针对移动设备和不同屏幕的设计变得更加轻松”。

媒体查询示例

媒体查询的一个简单示例可能如下所示:

复制代码
<link href="css/phone.css" rel="stylesheet" type="text/css"
media="only screen and (max-width: 400px)" >

在此示例中,将媒体查询添加到了标记中。在后面将会看到,您也可以在样式表中使用媒体查询。media 属性是该查询实际所在的地方。这个示例如下所示:

复制代码
only screen and (max-width: 400px)

该示例的含义应该很明显:仅将此样式表应用到拥有屏幕的设备,并且仅在浏览器窗口的宽度不超过400 像素时应用。您可以从文件名phone.css 上看出,这个特定的查询是为电话样式设计的。现在您已看到了一个示例,让我们更详细分析一下媒体查询,以及您可用于控制在何处应用样式的设备功能。

媒体查询支持和功能

媒体查询支持Internet Explorer (IE) 9 及更高版本、Firefox 3.5 及更高版本、Safari 3 及更高版本、Opera 7 及更高版本,以及大部分现代智能电话和其他基于屏幕的设备。尽管IE 的早期版本不支持媒体查询,但您可以(而且应该)从现在开始使用它们。处理早期浏览器的策略将在本文后面探讨。表1 列出了可用于媒体查询中的设备功能。

表****1. 用于设置媒体查询中的条件的媒体功能

功能

最大/ 最小值

描述

width

长度

显示区域的宽度

height

长度

显示区域的高度

device-width

长度

设备的宽度

device-height

长度

设备的高度

orientation

portrait 或 landscape

设备的方向

aspect-ratio

高宽比(宽 / 高)

设备的宽高比,使用由 1 个斜杠分开的两个整数表示(比如 16/9)

device-aspect-ratio

高宽比(宽 / 高)

设备宽度与设备高度的比率

color

整数

每种颜色成分的位数(如果不是颜色,该值为 0)

color-index

整数

输出设备的颜色查找表中的项数

monochrome

整数

单色镇缓冲区中每像素的位数(如果不是单色,该值为 0)

resolution

分辨率

输出设备的像素密度,表示为整数后跟 dpi(每英寸点数)或 dpcm(每厘米点数)

scan

progressive 或 interlace

TV 设备使用的扫描过程

grid

0 或 1

如果设置为 1,设备基于网格,比如电传类型的终端或仅有一种固定字体的电话显示设备(所有其他设备均为 0)

表 1 中的前 5 项功能(width、height、device-width、device-height 和 orientation)是最有用的。您可以为大部分功能添加 min- 和 max- 作为前缀,以表示最小和最大值,比如 min-width 和 max-width。表 1 中的“最大值 / 最小值”列表是哪些功能可通过此方式修改。

width、device-width 和 viewport

媒体查询的一个最容易混淆的方面或许就是 width 和 height 与添加了前缀 device- 的类似值之间的区别。对于桌面和平板计算机,它们之间的区别很容易理解:width 和 height 指浏览器视区的尺寸,而 device-width 和 device-height 指显示器的尺寸。不是每个人都会全屏运行他或她的浏览器,所以 width 和 height 是您需要使用的度量方法。

移动浏览器将填满可用的屏幕,所以您可能期望 width 和 device-width 是相同的。不幸的是,并不总是这样。大多数智能电话(包括 Android、iPhone 和 Windows Phone 7)将 width 设置为大约 1,000 像素宽的标称视区(在 iPhone 和 iPod touch 中,它为 980 像素;Windows Phone 7 使用 1024 像素)。图 4 展示了 iPod touch 通常如何显示前面插图中的示例页面。

图 4. 默认情况下,现代移动设备会缩放网页来适合所估计的视区。

即使附加到页面上的样式表使用媒体查询,依据 min-width 和 max-width 的值来提供不同样式,iPod touch 会忽略这些样式并显示桌面版本,因为它的视区被视为 980 像素宽。

更让人混淆的是,iPhone、iPod touch 和 iPad 在计算宽度时不会考虑方向,而其他设备会。

幸运的是,这种混淆情形有一个简单的解决方案。苹果公司设计了一个新的标记,它已被其他移动设备制造商广泛采用,已合并到可能会被万维网联盟(W3C)批准的规范中。要为支持媒体查询的所有设备提供公平的机会,只需向每个网页的添加以下这行代码:

复制代码
<meta name="viewport" content="width=device-width, initial-scale=1">

这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度。而且,它还告诉 iPhone、iPod touch 和 iPad 在计算宽度时考虑方向。这样,您可以在媒体查询中安全地使用 width,因为您知道它的用途与您所想的相同。

注意:许多移动设备(最显著的就是 iPhone 4 和 iPad 2)拥有高分辨率的显示屏,具有比桌面或平板显示器高得多的像素密度。这不会影响您在 CSS 中计算像素大小的方式。CSS 规范要求,如果输出设备的像素密度与典型计算机显示器的像素密度差别巨大,浏览器应该重新调节像素值。一些开发人员现在将像素度量方法称为 _CSS__ 像素 _。

如何编写媒体查询

要将媒体查询添加到 media 属性中,您可以使用表 1 中的媒体功能设置一个或多个条件。与 CSS 属性一样,在一个冒号后指定媒体功能的值。每个条件包含在圆括号中,使用关键字 and 添加到媒体声明中。例如:

复制代码
media="screen and (min-width: 401px) and (max-width: 600px)"

媒体查询是布尔值:它们要么为 true,要么为 false。如果整条语句为 true,那么将应用样式表。如果为 false,将忽略样式表。所以当使用上述查询时,所有部分必须为 true,才会应用样式表。换句话说,它将仅适用于 401 到 600 像素宽的屏幕。

一些媒体功能(比如 color、monochrome 和 grid)可用作条件,而无需指定一个值。例如,以下语句适用于所有彩色显示器:

复制代码
media="screen and (color)"

指定备用功能

没有 or 关键词可用于指定备用的媒体功能。相反,可以将备用功能以逗号分割列表的形式列出,比如:

复制代码
media="screen and (min-width: 769px), print and (min-width: 6in)"

这会将样式应用到宽度超过 769 像素的屏幕或使用至少 6 英寸宽的纸张的打印设备。

指定否定条件

要指定否定条件,可以在媒体声明中添加关键字 not,比如:

复制代码
media="not screen and (monochrome)"

不能在单个条件前使用 not。该关键字 _ 必须 _ 位于声明的开头,而且它会否定整个声明。所以,上面的示例会应用于除单色屏幕外的所有设备。

向早期浏览器隐藏媒体查询

媒体查询规范还提供了关键字 only,它用于向早期浏览器隐藏媒体查询。类似于 not,该关键字必须位于声明的开头。例如:

复制代码
media="only screen and (min-width: 401px) and (max-width: 600px)"

无法识别媒体查询的浏览器要求获得逗号分割的媒体类型列表,规范要求,它们应该在第一个不是连字符的非数字字母字符之前截断每个值。所以,早期浏览器应该将上面的示例解释为:

复制代码
media="only"

因为没有 only 这样的媒体类型,所以样式表被忽略。类似地,早期浏览器应该将以下语句解释为 media=“screen”:

复制代码
media="screen and (min-width: 401px) and (max-width: 600px)"

换句话说,它应该将样式规则应用于_ 所有_ 屏幕设备,即使它不知道媒体查询的含义。不幸的是,IE 6–8 未能正确实现该规范。没有将样式应用到所有屏幕的设备,它将整个样式表一起忽略。

尽管存在此行为,如果希望向其他不太常用的浏览器隐藏样式,仍然建议在媒体查询前面添加上only。

处理早期的Internet Explorer 版本

IE 6 到 IE 8 中缺少对媒体查询的支持,这不是问题。只需创建一组用于所有未使用媒体查询的浏览器的基本样式,而使用媒体查询为使用更高级浏览器的访问者提供一种增强的体验。

也可以使用 Internet Explorer 条件注释来向早期版本的 IE 提供一组特殊的规则,比如:

复制代码
<!--[if lt IE 9 & !IEMobile]>
<link href="iestyles.css" rel="stylesheet" type="text/css">
<![endif]-->

结合使用媒体查询与 @import 和 @media

除了在附加外部样式表时在标记中使用媒体查询,您也可以将它们与 @import 和 @media 结合使用。基本语法是相同的。例如,以下代码导入一个样式表,并将该样式应用到拥有不宽于 400 像素的屏幕的设备:

复制代码
@import url("phone.css") only screen and (max-width:400px);

媒体查询也可像如下这样用于样式表中:

复制代码
@media only screen and (max-width:400px) {
#navbar {
float: none;
width: 400px;
}
}

测试媒体查询

测试代码很重要。针对平板电脑和智能电话进行测试使测试变得更复杂,因为理想情况下您将有大量设备需要处理。幸运的是,无需拥有实际的设备,即可测量大多数查询。拥有真实的设备总是会更好,但出于本文的用途,使用简单的浏览器将有助于您理解查询的工作原理。

本文所附带的ZIP 文件包含一个范例文件(mediaqueries.html),该文件附加了3 种不同的设计。使用范例文件执行以下调节测试。将浏览器窗口完全打开,您可以看到基本的站点设计(参见图1)。将浏览器窗口缩小,在进入各种设备的尺寸范围时可以注意到变化。进入代码中指定的尺寸范围时,样式会更改为平板电脑(图2)或电话大小(图3)。例如,对于平板电脑,页眉图像会变得更小,下面的独立区域会呈现不同的形式。对于电话样式,主要的中央图像会消失,替换为由更大的垂直按钮组成的菜单。

浏览器在每次窗口更改时都会检查媒体查询,比如当您调整它时,或者当您将电话从竖向旋转到横向时。

Dreamweaver CS5.5 中的媒体查询

Dreamweaver CS5.5 在 Adobe 在针对 Dreamweaver CS5 的 11.0.3 更新中引入的媒体查询支持之上进行了改进。新的 Media Queries 对话框可帮助您为一个页面或整个网站创建和维护媒体查询(参见图 5)。

您可以从以下任何位置访问 Media Queries 对话框:

  • Modify > Media Queries
  • Multiscreen Preview 面板 > Media Queries 按钮
  • Multiscreen 下拉菜单 > Media Queries
  • CSS Styles 面板右上角的 Options 菜单
  • CSS Styles 面板中的上下文菜单

图 5. Dreamweaver CS5.5 中的 Media Queries 对话框

使用这个新对话框,您可以:

  • 创建多个媒体查询。
  • 将媒体查询附加到当前页,这会添加一个或多个 CSS 文件的链接。
  • 创建一个 site-wide 媒体查询文件,这会添加一个集中化的 CSS 文件的链接,该文件导入其他特定于设备的 CSS 文件。

当使用 site-wide 选项时,您可以链接到现有的 CSS 文件,或者从对话框自身中创建新文件。

Media Queries 对话框还将在查询上方使用您作为描述而添加的文本创建一个注释。

此外,您可以选择将视区标记添加到文档中,这将强制设备报告它的实际尺寸,而不是标称的视区。选择此选项有助于预防由于错误报告的尺寸而引起的意外缩放。

注意:对于现在,Media Queries 对话框仅读取和写入拥有至少一个 min-width 和 max-width 值的查询。此外,该对话框还会编辑这些唯一的 min- 和 max- 值。您可以手动编辑其他查询参数,但 min-width 和 max-width 是最常用于确定目标设备的值。

预设值和站点定义

Media Queries 对话框还在媒体查询列表区域底部提供了一个预设选项。单击这个 Default Presets 按钮,Dreamweaver 会自动创建:

  • 3 个分别针对平板电脑、电话和桌面的媒体查询
  • 预先填充了常用起始值的 min-width 和 max-width。

Default Presets 按钮提供了一种开始使用媒体查询的快速途径。

另一种管理 site-wide 媒体查询文件的方便方式是使用 Site Setup 对话框。现在有一个名为 Site-wide Media Query File 的字段(位于 Advanced Settings > Local Info 中),它指定了您的 site-wide 媒体查询文件。只要您打开 Media Queries 对话框,这里列出的文件就会显示为 site-wide 选项。对于新的(或者甚至现有的)文件,您所需的只是选择该选项来将 site-wide 媒体查询文件应用到当前页面。

注意:更改此文件不会自动更新所有站点文件。

Media Queries 对话框提供了一种简化媒体查询的创建和管理的不错方式。

媒体查询已是使用不同样式确定目标设备的首选方式。从上面可以看到,它们不仅适用于智能电话,还可用于控制任何屏幕的观感。

此教程系列的第2 部分是一个动手练习,展示了如何使用媒体查询向不同的设备提供样式。

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License + Adobe Commercial Rights

本文依据 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授权。与本作品中包含的代码示例相关、超出此许可范围的权限可在 Adobe 网站上找到。

查看原文: Introduction to media queries – Part 1: What are media queries?

2011-12-21 22:456936

评论

发布
暂无评论
发现更多内容

深度剖析「圈组」消息系统设计 | 「圈组」技术系列文章

网易云信

开发 社交软件

网络安全SSRF漏洞检测

网络安全学海

网络安全 信息安全 WEB安全 漏洞挖掘 信息安全渗透测试

阿里云数据库MongoDB版助力吉比特《一念逍遥》游戏斩获千万玩家,运营效率成倍增长

MongoDB中文社区

mongodb

与开源社区用户共创,首本《OceanBase 社区版入门到实战》电子书新鲜出炉啦!

OceanBase 数据库

TiDB HTAP 遇上新能源车企:直营模式下实时数据分析的应用实践

PingCAP

Linux之tr命令

入门小站

6元自助洗车店加盟需要多少费用

共享电单车厂家

自助洗车加盟 6元自助洗车店加盟 6元自助洗车 自助洗车加盟费

脚本库详细说明 - 大屏云极简使用手册

shulinwu

模块一作业

库尔斯

架构实战营

2022 CCF国际AIOps挑战赛线上宣讲会成功举办

BizSeer必示科技

Obsidian使用初体验

懒时小窝

软件推荐

在线HTML转MarkDown工具

入门小站

工具

6元自助洗车设备一套多少钱一台

共享电单车厂家

自助洗车机多少钱 自助洗车机价格 自助洗车加盟 6元自助洗车设备 6元自助洗车机

英特尔陈伟:以智能边缘解锁数智时代新未来

科技新消息

江苏财政的数字新径,大型政企的云上坐标

脑极体

在线Javascript加密混淆工具

入门小站

工具

如何画好架构图

Hockor

架构 前端

体验了一把最近很火的开源项目-MASA Blazor

MASA技术团队

C# .net 微软 组件库

隐私计算势头迅猛,但金融行业用户需要“冷静”

易观分析

金融 隐私计算 AMC

Linux云计算之VSFTP服务器概述-安装vsftp服务器端、客户端

学神来啦

Linux 运维

怎样搭建企业内部wiki

小炮

企业 wiki

高层次人才一站式服务平台系统开发 探索全方位服务新模式

a13823115807

架构训练营-模块1-作业

kenlu

6元共享24小时自助洗车加盟如何

共享电单车厂家

24小时共享自助洗车 6元自助洗车加盟

T3 出行 Apache Kyuubi Flink SQL Engine 设计和相关实践

网易数帆

sql 大数据

架构训练营 - 模块一

junl

架构实战营

系列解读SMC-R:透明无感提升云上 TCP 应用网络性能(一)| 龙蜥技术

OpenAnolis小助手

网络协议 技术分享 龙蜥社区 RDMA SMC-R

参与开源项目很难吗?

捉虫大师

乘数科技加入PolarDB开源数据库社区

阿里云数据库开源

数据库 阿里云 开源 开源数据库 polarDB

自助扫码洗车机加盟怎么加

共享电单车厂家

自助洗车机价格 自助扫码洗车机 自助洗车怎么加盟 共享洗车加盟

万亿级超高清产业变奏,分布式存储支撑关键应用落地

焱融科技

云计算 分布式 高性能 文件存储 影视渲染

媒体查询简介——第1部分:什么是媒体查询?_语言 & 开发_David Powers_InfoQ精选文章