中国的博客，走近我们的产品、技术和文化
Google 中国的博客，走近我们的产品、技术和文化
响应式设计 - 利用媒体查询的力量
2013年1月25日
发表者：
Rupert Breheny
,
Edward Jung
, &
Matt Zürrer
，Google网站管理员小组
原文：
Responsive design – harnessing the power of media queries
转载自：
谷歌中文网站管理员博客
发布时间：2013年1月24日 下午 03:43:00
我们热爱数据，同时我们还花了大量时间分析自己网站的数据情况。而对于采取同样行为的网站开发者来说，也必然会注意到来自移动设备的访问量在大幅增加。在过去的一年里，我们发现，许多主要网站的页面访问量中有相当一部分来自智能手机及平板电脑。而这类用户往往使用的都是支持最新HTML、CSS、以及JavaScript的浏览器，但同时，他们的屏幕宽度往往也都很有限，一般仅为320像素。
我们对产品的承诺是
简单易操作
，而这意味着，我们将竭尽全力保证所有用户都能获得愉快的网络浏览体验。我们之前面临的艰难抉择在于，究竟该开发移动网络专属网站还是该调整现有及新建网站以使其既适合台式机，又适合移动设备。如果开发两种网站，好处在于我们可以更有针对性的满足硬件设备需求；而保留一种网站，只做调整的话，则可以保留一种标准的URL，避免出现复杂的重定向问题，而且还可以简化网址共享。出于对可维护性的考虑，我们倾向于保留一种网站类型，同时我们也开始考虑如何才能满足以下准则：
1.我们的页面应保证在任何屏幕分辨率下都能够清晰渲染
2.我们对一种内容进行标注，使其在任何设备上都能够浏览
3.不论视窗尺寸如何，都不能出现水平滚动条
排列内容，改进导航，重新缩放图片尺寸 -
Chromebooks
实施
作为起点，简单的语义标记在布局需要改变的情况下能使我们的页面更具灵活性。通过保证样式表使用流式布局，我们就能逐步实现在移动设备上的应用。我们舍弃了针对浏览器设定宽度的方法，改为采用最大宽度。至于高度方面，我们采用最小高度，这样大字体或多行文本就不会破坏浏览器边缘。而为了保证固定宽度的图片不会将液柱“撑开”，我们将运用CSS规则：
img
{ max-width: 100%;
}
流式布局是一个好的开始，但仍缺乏一种特定的技巧。幸运的是，包括IE9+及大部分移动设备在内的
现代浏览器
均支持
媒体查询
功能。而这正是造就在移动浏览器上用户体验下降的网站与经过改进，能够有效利用简洁用户界面的网站之间区别的因素。不过，首先我们必须考虑的是，智能手机怎样向服务器表明了自己。
窗口
像素何时不为像素？答案是在智能手机上的时候。按照默认设定，智能手机浏览器伪装出高分辨率台式电脑浏览器的效果，其所呈现的页面会让用户以为自己是在通过台式电脑屏幕进行浏览。正因为如此，才有了必须放大才能阅读的微小文本“综观模式”。不论屏幕的
实际物理像素
是多少，Android版浏览器的
默认窗口
宽度为800像素，IOS浏览器为980像素。
为保证浏览器将您的页面渲染得可读性更强，您需要用到窗口元标记元素：
尽管移动设备的屏幕分辨率彼此之间差异很大，但现在的大多数智能手机浏览器使用的都是320像素的标准设备宽度。如果您的移动设备宽度为640物理像素，那么320像素宽的图片将通过倍增像素数目扩大至全屏尺寸。这也是为什么文本在小屏幕上看起来更加干净 - 与在标准台式电脑显示屏上时相比，像素密度增加了一倍。
在窗口元标记标签中根据设备宽度设定文件宽度的好处在于，当用户改变智能手机或平板电脑的定向时，设定也能够随之更新。将这一功能与媒体查询结合在一起可以使您在用户旋转设备时改进布局：
@media screen and (min-width:480px) and (max-width:800px) {
/* Target landscape smartphones, portrait tablets, narrow desktops
*/
}
@media screen and (max-width:479px) {
/* Target portrait smartphones */
}
在实际操作中，您可能会发现，根据网站在不同设备上连贯及表现效果的不同，您或许会用到各种断点。您也可以不涉及像素次元，在
系统支持
的情况下，通过定向媒体查询将某些特定定向设为目标。
@media all and (orientation: landscape) {
/* Target device in landscape mode */
}
@media all and (orientation: portrait) {
/* Target device in portrait mode */
}
排列内容，较小图片-
Google文化研究所
媒体查询范例
近日，我们重新启动了
Google大全
页面。除采用了流式布局以外，我们还加入了部分媒体查询功能以改善小屏用户，如平板电脑和智能手机用户的浏览效果。
我们并未采用针对特定设备分辨率的做法，而是设计了各种尺寸的断点。针对分辨率超过1024像素的屏幕，我们根据12列格，将页面按照原始效果进行渲染。而针对801像素至1024像素之间的屏幕，我们将通过流式布局为您呈现稍微经过压缩的浏览效果。
只有在屏幕分辨率低于800像素时，非核心内容才会被置于页面底端：
@media screen and (max-width: 800px) {
/* specific CSS */
}
通过媒体查询功能，我们也踏入了智能手机领域:
@media screen and (max-width: 479px) {
/* specific CSS */
}
至此，我们已不再载入大型图片，而是改为排列内容区块。另外，我们还会在不同内容之间插入空白，使内容处于不同区域且更容易辨别。
通过以上的简单措施，我们保证了网站在各种不同设备上皆能使用。
排列内容及移除大型图片-
Google大全
总结
我们必须牢记，保证网站在移动设备及窄小窗口上也能浏览绝不是一件容易的事情。流式布局虽然是一个不错的开端，但我们仍需在设计上做出部分妥协。媒体查询功能虽然有助于许多设备改善浏览效果，但我们不能忘记，有
25%的网站访问量
仍是通过那些不支持此技术的台式电脑浏览器进行的。此外，该功能在运行方面也仍有不足之处。而如果您的网站上设置了好玩的插件，使用鼠标的用户或许能正常浏览，但对于难以实现精确操作的触屏用户，恐怕会带来很多不便。
关键的问题在于，既要早测试，又要常测试。花时间在智能手机或平板电脑上浏览自己的网站绝对是值得的。而如果您无法通过实际设备进行测试，您可以使用
Android SDK模拟器
或
IOS模拟器
。您也可以请朋友或同事在他们的设备上浏览您的网站来观察效果。
移动浏览器用户是新的网络用户中十分重要的一个组成部分。而学会如何满足他们的需求也是专业开发中一个激动人心的新领域。
更多Google响应式设计范例：
•
www.google.com.hk/about/
•
www.google.com.hk/goodtoknow
•
www.google.com.hk/culturalinstitute
•
www.google.com.hk/events/sciencefair
•
www.google.com.hk/intl/en/chrome/devices
•
picasa.google.com.hk/
標籤
编程之夏，UR
创新
创意改善社会 公益温暖中国
促进智能能源利用
大学
谷歌翻译，即时相机翻译，Instant Camera Translation
谷歌十周年系列
谷歌艺术与文化
观妙中国，Shadow Art，智玩皮影
广告
广告安全
互联网，Internet
科技
女性开发者
社会
视频广告
数据中心
数字营销
搜索
网站管理员
文化研究所
艺术计划
音乐搜索
愚人节
增强型广告系列
智能隐形眼镜项目
中小企业
adexchange
Admob
admob sdk
Ads
Adsense
AdWords
android
android m
Android应用开发中国大学生挑战赛
App Inventor
Calendar
cardboard
CES
Chrome
Chrome Web Store
Chrome，Chrome实验
Chrome实验
CI
Code Jam
corporate
Creative
Cross-device
Cultural Institute
culture
Data Center
DevArt
Developer
display
diversity
Doodle
DoubleClick
G+
G2G，Culture
GA&C
gaming
Global Impact Awards
Gmail
Gogle科学挑战赛
Good to Know
Google Ads
Google AdWords
Google Analytics
Google Art Project
Google Arts & Culture
Google Code-in竞赛
Google Demo Day Asia
Google Docs
Google Doodle
Google Drive
Google Drive 云端硬盘
Google Fiber
Google Font
Google for Startups
Google Green
Google I/O
Google Image Search
Google Keep
Google partners
Google Play
Google Science Fair
Google Search
Google Top Contributor Summit
Google Translate
Google Trend
Google Trends
Google Zeitgeist 2012
Google安全系统
Google博士生奖研金
Google翻译
Google奖学金
Google杰出贡献者峰会
Google科学挑战赛
Google网站管理员
Google网站管理员，Webmaster
Google文化研究所
Google在线营销挑战赛
Google中国教育高峰会
IME 输入法
Innovation
Made with Code
maps
mobile ads
mobile ads sdk
Modoo
moonshot
native ads
Nexus
programmatic buying
Project X
Pwn20wn及Pwnium3 黑客大赛
Remarketing. Ads
Search
Security
smb
Solve for X
Street view
student
UR
VR
Web Platform Docs
web security
Webmaster
year in search 2014
YouTube
zeitgeist
博客归档
2024
12月
11月
10月
8月
7月
6月
5月
4月
3月
2月
1月
2023
12月
11月
10月
9月
5月
4月
3月
2月
2022
11月
10月
5月
4月
2月
1月
2021
10月
9月
5月
4月
3月
2月
2020
12月
5月
4月
3月
2019
10月
8月
7月
6月
5月
4月
3月
2018
12月
10月
9月
8月
7月
6月
5月
3月
2月
1月
2017
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2016
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2015
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2014
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2013
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2012
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2011
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2010
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2009
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2008
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2007
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
1月
2006
12月
11月
10月
9月
8月
7月
6月
5月
4月
3月
2月
Feed
