读书频道 > web开发 > 其他综合 > 学习响应式设计
1.2.5 媒体查询
2015-05-08 14:26:39     我来说两句 
收藏    我要投稿   

本文所属图书 > 学习响应式设计

本书分为四部分,全面介绍响应式Web 设计策略与技术,引领大家掌握从项目立项到网站上线的响应式设计工作流程。第一部分介绍响应式设计及其与其他网页设计方法的区别。第二部分概述构建响应式站点的基础知识、必  立即去当当网订购
网页设计社区重拾流式布局的理念,使用基于百分比的宽度,并设法让其成为一种适用于小型移动设备的解决方案。
 
使用百分比而不是像素使得网页及页面各部分都能够自动改变宽度来适应任意屏幕尺寸,因此也就很容易地消除了相似尺寸设备之间的差异。但是一旦你纵观所有的设备,就会有这样一个问题。如果要缩窄三栏的布局以应用于智能手机的屏幕宽度,那么各栏中的文本会变得窄而长,难以阅读。同样,单栏布局在智能手机屏幕上看起来是蛮好的,但要想在桌面显示器上轻松阅读则显得太宽了。
 
本质上,这个问题是:不创建多个单独的站点,如何使一个网站能够在窄屏上以单栏显示,而在大屏上以多栏显示?如何根据浏览网站的设备的特性来要求浏览器变换网页的布局?
 
媒体查询登场。
 
CSS 的@media 规则允许你根据设备特性而显示不同的CSS 样式,这实际上在十多年前的CSS2 中就有了,但当时它只支持查询媒体的类型,比如屏幕(screen)或打印(print)。这通常只能用于为网站设计创建一个打印版(可能包含的变化也仅仅是去除背景色,以免浪费打印机墨水)。
 
直到CSS3 对媒体查询制定了规范(即关于某事必须怎样做的一个正式详尽的描述),才能够基于媒体(设备)的宽度、高度和色彩性能等特性执行更精确的查询。媒体查询不影响HTML(页面之下的实际内容和结构),只影响使用CSS 后应用到页面的样式。浏览器在2009 年前后开始支持CSS3 媒体查询。
 
媒体查询可以做什么呢?
 
举个基本的例子,假设我们有一个网站,有两块各自独立的内容。我们可以创建一个很适合智能手机的单栏设计,以垂直堆叠的方式显示两块内容。而在更宽的屏幕上,我们可能想要以并排的两栏来显示这两块内容。
 
使用媒体查询,我们可以询问设备屏幕有多宽,然后告诉浏览器仅在屏幕具有足够宽度时,才以两栏来显示内容。
 
要用代码来实现这种效果,我们在开始只是用CSS 将内容显示在一栏中,然后再添加一条CSS 媒体查询,询问屏幕宽度是否大于等于40 em(你将在第4 章中了解em,40 em 的宽度略窄于一台常见的平板电脑,但你可以在媒体查询中指定任一宽度)。
 
之后我们会在这条媒体查询中添加CSS 样式将内容显示在两栏中。浏览器仅在该媒体查询结果为真时(即如果屏幕宽度大于等于40 em)才使用此CSS 样式。如果屏幕宽度小于40em,它会忽略此CSS 样式,内容保持在一栏中。
 
因此,我们可以针对不同的屏幕尺寸使网站变换为不同的布局,而无需创建单独的网站。
 
通过使用媒体查询,我们可以随心所欲地改变网站的样式,不仅仅是栏数。媒体查询可以移动内容,改变文字的大小,隐藏或显示内容块,调整边距和空白,以及调整其他的CSS样式。
 
[ 小贴士]
 
在这一节中,我提到了询问设备屏幕宽度的媒体查询。实际上,在响应式设计中常见的媒体查询是询问设备的视口宽度,而不是屏幕宽度。视口是屏幕上(浏览器窗口中)显示网站的区域。
 
在台式电脑上,你可以改变浏览器窗口的大小,因此,窗口并不总是屏幕的最大宽度。媒体查询会检测浏览器窗口内的空间,所以如果你改变了浏览器窗口的大小,你的视口也会发生变化。在移动设备上,你无法改变窗口的大小,所以屏幕和视口总是相同的宽度。
 
尽管正确的术语应该是视口宽度,但你仍会经常听到人们在谈论媒体查询和响应式设计时说到屏幕宽度。从技术上讲他们说得并不正确,他们很可能指的是视口宽度(正如我在本书中所做的,除非我明确指出)。
 
还有其他的媒体查询,可以检测设备屏幕的实际宽度而不是视口宽度,但在目前它们并不常用。
点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.2.4 更多的设备
下一篇:1.2.6 灵活性
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站