红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

媒体查询简介——第 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:456742

评论

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

强大的macOS效率工具,Alfred 5更新变动详解

Rose

Alfred Mac软件 Alfred 5 苹果效率工具

如何通过Java应用程序将PDF转为图片格式?

在下毛毛雨

PDF 图片 格式转换

从0到1:学员课时预约与扣课小程序开发笔记

CC同学

智能选路系统与架构

阿里云视频云

云计算 智能选路

管理研发团队后,我发现用「速率」做度量错得离谱……

LigaAI

研发管理 研发效能 技术管理 效能度量 企业号 3 月 PK 榜

博睿数据数智领航营首场开营:保险科技数智化转型中的智能运维实践

博睿数据

智能运维 博睿数据 数智化转型 保险行业

别再说被八股文害惨了!GitHub阿里Java面试题库标星145K不无道理

Java你猿哥

Java 面试 面经 八股文 Java八股文

迟来的Offer,至今已有672名学长靠这套Java八股文成功入职大厂

Java你猿哥

Java 面试 面经 春招 八股文

ODC,是另一个 Navicat 吗?

OceanBase 数据库

数据库 oceanbase

meta魔豹联盟系统开发源码(Demo)技术成熟

I8O28578624

分享:FactorJoin,一种新的连接查询基数估计框架

Java你猿哥

数据库 ssm

mac版photoshop 2023存储为窗口显示空白、黑屏如何解决

Rose

PhotoShop ps2023存储空白 空白、黑屏

graphpad prism教程:如何使用 prism医学绘图分析软件?

Rose

prism破解版 prism教程 医学绘图分析

机器学习系列入门系列[七]:基于英雄联盟数据集的LightGBM的分类预测

汀丶人工智能

数据挖掘 机器学习 LightGBM

Github百万收藏!一份《从零开始写分布式服务框架》称霸榜首!

程序知音

Java 分布式 编程语言 java架构 后端技术

Sentinel Go- 揭秘 [热点参数] 的实现原理

柠檬汁Code(binbin0325)

golang 中间件 限流 原理分析 Sentienl

GPT-4创造者:第二次改变AI浪潮的方向

OneFlow

2023年阿里发布Redis最新版进阶笔记,真的香

开心学Java

Java redis 并发

焱融科技助力海尔集团上云 加速“智能制造”进程

焱融科技

文件存储 分布式存储 容器存储 分布式文件存储 #高性能

非常小的一个东西,Spring依赖注入Bean类型的8种情况

小小怪下士

Java spring 程序员 后端

实战开发arthas-spring-boot-starter,监控你的微服务是否健康!

Java你猿哥

spring Spring Boot

PD虚拟机如何安装ARM版CentOS Linux系统镜像(苹果M1专用)

Rose

pd虚拟机 pd18虚拟机 CentOS Linux系统 Centos Stream 9

H2存储内核分析一

陈飞

分布式数据库 大数据 开源 数据库内核

实用fcpx视频剪辑:Final Cut Pro 中文版

真大的脸盆

Mac Mac 软件 FCPX软件 fcpx

量化合约技术系统开发(源码搭建)合约量化技术开发(Demo)

I8O28578624

在路上!OceanBase首次公布四大“开发者友好”实践

OceanBase 数据库

数据库 oceanbase

Go 第三方 log 库之 zap 使用

江湖十年

后端 日志 Go 语言

万字详解AI开发中的数据预处理(清洗)

Baihai IDP

人工智能 机器学习 数据清洗 数据预处理 企业号 3 月 PK 榜

用OceanBase试了一下ChatGPT开源文档问答助手

OceanBase 数据库

数据库 oceanbase

Android系统服务DropBoxManagerService详解与实践应用

vivo互联网技术

文件管理 Dropbox 文件上报

想要找macOS系统上跑分工具?Geekbench 6帮助您快速,准确地测量处理器和内存性能进行测试

Rose

mac系统 系统跑分 Geekbench Geekbench 6

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