WonderCSS

响应式布局的钥匙之 @media

随着 CSS3 和 html5 的日趋普及,除了“瀑布流”的泛滥登场外,还有一个风头正劲的名词,那就是“响应式布局(Responsive Web Design)”。响应式布局这个词是根据建筑学中的响应式建筑延伸出来的。我们先了解下它的源头:

“响应式建筑(Responsive Architecture)”提出,物理空间应该可以根据存在于其中的人的情况进行响应。

将这个思路延伸到Web设计的领域,我们就得到了一个全新的概念。响应式布局 就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局

如是说在实践中告别了浏览器横向的滚动条,我们可以通过 响应式 的设计手段和开发思路让页面布局更加”弹性”。图片的尺寸可以被自动调整,页面布局再不会被破坏。虽然永远没有最完美的解决方案,但它给了我们更多选择。无论用户切换设备的屏幕定向方式,还是从台式机屏幕转到手机或屏蔽电脑上浏览,页面都会真正的富有弹性。

随着目前大屏幕移动设备的普及,响应式WEB布局用“大势所趋”来形容也不为过。现在越来越多的设计师采用这个技术,而这个技术的关键是随着 CSS3 诞生的新成员 Media Query 媒介查询。

媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。也就是说我们可以通过WEB判断浏览者持用的浏览器是在台式电脑、手机、平板还是其他设备上。然后我们通过media query来为不同尺寸的设备赋予不同的样式。

media query 语法结构

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}

这么看有些模糊,那么我通过实践使用来了解它。比如我们在调用样式表时为小于等于640像素宽的设备附加样式表:


<link rel="stylesheet" type="text/css" media="only screen and (max-width:640px),only screen and (max-device-width:640px)" href="link.css" />

第一个条件 max-width 是指渲染界面最大宽度,第二个条件 max-device-width 是指设备最大宽度。其中的 only 可省略,因为限定于计算机显示器。通过这个方法我们可以判断不同宽度来调用不同的样式表,比如ipad1设备最大宽度是800px,一般大屏智能手机640px等待。

除了使用link调用样式表,我们还可以在样式表里添加 @media ,同时是为640宽的设备做样式:


@media (max-width: 640px) {
     .page {
          width:100%;
     }
}

如此这般我们在设计页面是通过改变浏览器宽度就能大致测试“响应式”的效果了,但如果即将正式发布到服务器上,不想让浏览者改变浏览器窗口即响应的话,那么需要把 max-width: 640px 换成 max-device-width: 640px ,因为 max-device-width 是指设备最大宽度。

通常情况我们只需要照顾几个小宽度即可,比如 800px 640px 320px ,而具体是使用调用不同的样式表还是在统一样式表里做判断,这个需要具体问题具体分析,更多的是开发者们的使用习惯。 @media 是响应式布局和核心,今天只是做个简述记录,伴随他的还有更多相关技术或技巧,它日再叙。

By 于湛 发布于 2013.03.5 2,168 次浏览

响应式布局的钥匙之 @media》上有1条评论

  1. Pingback引用通告: 响应式布局的钥匙之 图片液态化 | WonderCSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注