公众账号

二维码 微信扫描关注

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

响应式互联网设计(4)

或者作为@import输入指令的一部分:

@import url("shetland.css") screen and (max-device-width: 480px);

以上的每一个例子,效果其实都是一样的:一旦设备通过媒介查询的检验,相关的CSS样式表即施加到源码上。媒介查询简言之就是我们设计师的条件注释(conditional comments)。不同的是我们并非针对某个浏览器的某个版本,而是随着设计布局逐渐超越其初始的理想分辨率,对产生的问题进行有意识的矫正罢了。

改变、响应和征服


来看看我们最初的设计的页面中的那些基本图片吧。在默认状态的布局下,相关的CSS是这样的:

.figure {
    float: left;
    margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
    width: 31.121642969984202211%;             /* 197px / 633px */
}

li#f-mycroft,li#f-winter {
    margin-right: 0;
}	

在这里我省略了一些字体上的定义而把焦点集中在布局上:每一个.figure类别的图片元素都定义在包含其在内的栏宽的三分之一左右,最右边的两个图片 (li#f-mycroft和li#f-winter)的右侧外边距(margin)定为零。这个设置只要在视区(viewport)的大小与初始设计目 标比较没有太大改变的情况下都能呈现得比较好。有了媒介查询,我们就可以作与分辨率相关的局部调整,使设计方案能更好地适应显示设备的变化。

首先,我们把视区在某一分辨率界限值(比如说600px)以下的页面作线性调整。所以在样式表的下方我们加上一段@media定义,如下:

@media screen and (max-width: 600px) {
.mast, .intro, .main, .footer {
    float: none;
    width: auto;
}
}

如果你在一个标准的现代台式电脑浏览器内打开我们更新了的设计页面,将视窗缩小到600px以下,媒介查询会取消页面主要元素的悬浮属性,并将其依照文件顺序竖向堆叠起来。这样,我们的设计的小型版就成型了,只是其中的图片仍旧不能智能地伸缩。如果我们引进另一个媒介查询,便能够做出相应的改变了:

@media screen and (max-width: 400px) {
.figure,
    li#f-mycroft {
        margin-right: 3.317535545023696682%;    /* 21px / 633px */
        width: 48.341232227488151658%;          /* 306px / 633px */
  }

li#f-watson, li#f-moriarty {
        margin-right: 0;
  }
} 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)