公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

响应式互联网设计(3)

<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

为了能使设计的适用范围不仅局限于格式整齐的打印件,CSS的规范中包括了相当多的可适用媒介类别, 分别为各种特定的互联网终端设备所设计。然而大多数浏览器和设备并没有真正地支持规范中的实质精神,致使许多媒介类别没有得到完善的实施,有的甚至完全被忽视。

值得庆幸的是W3C在CSS3的规范中创建了媒介查询(media queries), 用以在媒介类别的基础上加以改善。媒介查询使我们不仅能针对某些特定的设备类型,还能够对呈现设计的设备的物理特性进行检验。比方说近来随着移动 WebKit的普及,媒体查询就已成为一项很常用技巧,用以向iPhone、安卓及其他类似的移动系统提供定制的样式表。具体方法是在链接样式表的媒介属 性中加上这样一个查询:

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

这个查询中包含两个部分:

  1. 媒介类别——屏幕(screen),以及

  2. 括号中的查询内容,包括具体需要检验的媒介特性——最大设备宽度(max-device-width),以及紧跟其后的目标数值(480px)。

查询以简明的英语表明我们需要检验设备水平方向的最大分辨率(max-device-width)是否480px。如果检验通过——也就是说,如果设计确 实是呈现在类似iPhone的小屏幕上——那么设备则载入指定的样式表shetland.css。否则,这个链接则被忽略。

设计师们以往也试验过具有分辨率意识的布局,不过那些试验大多依赖于JavaScript驱动的方法,比如卡梅伦·亚当斯(Cameron Adams)的绝妙程序。然而媒介查询则明确地提供了一系列媒介属性,不仅止于屏幕分辨率而已,从而大大地扩展了查询的可能范围。并且,你还可以用一次查询同时检验多项属性的数值,用关键词and把多个查询内容连接在一起:

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />

除此之外,我们不仅能够把媒介查询放置在链接(link)之中,还可以用@media法则在CSS样式表内进行媒介查询:

@media screen and (max-device-width: 480px) {
    .column {
        float: none;
    }
} 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)