一个普通的自适应显示的三栏网页,当用不同的终 端来查看这个页面时,会根据几种线端来显示不同的样式。在电脑上是三列,在iPad上也应该是三列,在大屏手机上是三行,在屏幕小于320px的手机上只显示主要内容,隐藏了次要元素。 我们知道,在不同的设备中,浏览器的窗尺寸可能是不同的。如果只针对某种窗口尺寸来制作网页,在其他设备中呈现该网页时就会产生很多问题:如果针对不同的窗口尺寸制作不同的网页,则要制作的网页就会太多。为了解决这个问题,在CSS3中加入了MedisQueries模块(媒体查询),它是制作响应式布局的-个利器,使用这个工具我们可以非常方便、快捷地设计出各种丰富的、实用性强的界面。在Media Queries 模块中允许添加媒体查询表达式,用以指定媒体类型,然后根据媒体类型选择应该使用的样式。换句话说,允许在不改变内容的情况下,在样式中选择一一种 页面的布局以精确地适应不同的设备,从而改善用户体验。网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式,然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可。