aeven.me首页响应式设计小结

最近响应式设计是一个很火的概念。随着手机、平板等移动设备的流行,为小分辨率设计方便浏览的特定排版,能够增强用户体验。因此,Aeven也小试牛刀一把,把aeven.me的首页改版成为响应式设计页面。颇有些心得可以总结一下。

在做响应式设计前需要做的准备工作

在开始编写响应式设计的代码之前,需要对原网页一些css定义进行改动。

1. 在响应式设计中,网页界面的排版会随着窗口的扩大缩小而改变。因此,网页内各元素不能指定固定宽度

对于最高层的父元素,一般可以指定一个max-width作为最大宽度,那么在浏览窗口缩窄时,会随之缩窄。对于本网站来说,可以给最高层的元素定义宽度如下:

#wrapper{
max-width:1000px;
}

另外,对于网页内的层元素,要使用百分比作为宽度,这样在缩窄窗口时,层元素会相应缩窄,不会发生发生重叠现象。

2. 不能指定各元素的固定高度

在窗口缩窄时,网页的内容变窄,高度增大,若某些层元素指定了固定高度,则会溢出或不可见。故不能指定高度,应该让其自适应。

3. 去掉一些固定大小的背景,或在响应式设计中,重新指定背景的大小。

在Aeven的网站中,为了实现圆角和阴影,Aeven使用了圆角图片和阴影图片作为背景。但是在网页窗口发生变化时,这些背景图片不会改变,从而出现错位现象。

经过考虑,Aeven决定使用css3来实现这些圆角和阴影效果。虽然在低版本IE中失去了这些效果,但并不会对网页浏览产生很大的影响。

在进行一番改造之后,就可以开始针对网页进行响应式设计了。

响应式设计原理

响应式设计的主要原理,就是利用css3的“媒体查询”(Media Queries)特性,规定一系列条件(比如:最大宽度、最小宽度等),应用特定的css代码。在媒体查询内的代码,只有符合指定条件才会执行。通常情况下,响应式设计都是考虑常见的几种窗口大小(如1280,1024,480等),在窗口较宽时增加竖向分栏,在窗口较窄时减少竖向分栏,来达到增强浏览体验的目的。

实施响应式设计

响应式设计的代码要写在css文件的尾部,以便它能覆盖之前的样式设置。Aeven网站首页的响应式设计思路如下:

默认的界面在窗口宽度大于1000px时,都能正常显示。

  1. 在小于1000px的情况下,居右浮动的顶部菜单与LOGO出现重叠,因此把顶部菜单的右浮动取消,排布在logo下。
  2. 在小于550px的情况下,三栏和二栏布局的元素都显得很拥挤,因此需要让它们每个独占一行排布。页面底部由四栏变成两栏。
  3. 在小于480px的情况下,底部由两栏变成一栏。

代码如下:


/* media query */
@media screen and (max-width: 1000px){
#access{
position: static;
top:0;
right:0;
}
#access .menu-header li, div.menu li{
margin:5px 5px 5px 0;
padding-left:0;
}
}
@media screen and (max-width: 550px){
.col01,.col02,.col03{
width:100%;
float:none;
margin-top:10px;
}
.about{
float:none;
width:100%;
margin-right:0;
}
.works{
float:none;
width:100%;
margin-top:20px;
}
.about-cat{
width:40%;
}
.service-cat{
width:57%;
margin-right: 0;
}
.blog-cat{
clear:both;
margin-top:20px;
width:40%;
}
.contact{
width: 57%;
margin-top:20px;
}
}
@media screen and (max-width: 480px){
.about-cat,.service-cat,.blog-cat,.contact{
width:100%;
margin: 10px 0 0 0;
}
}

很多手机浏览器设置有缩放模式,使得响应式设计代码不起作用。好在有个特殊的meta标签,可以告诉手机浏览器你的网站针对它们进行了优化,可以让你自定义界面可视区域的尺寸和缩放级别。只需要在head加入如下代码:


<meta name="viewport" content="width=device-width,maximum-scale=1.0">

最后完成的效果如图:

aeven-responsive01

aeven-responsive02

感想

响应式设计看起来很有趣,似乎也有一定的作用。但它的作用并不如想象中那么大。在桌面电脑领域,做网站还是以960px宽度为主,可以兼容大部分主流的显示器分辨率,响应式设计作用不大。目前响应式设计在移动设备端比较有用,通过响应式设计,用户可以更方便地浏览网页内容,而不必频繁地放大缩小某一页面区域。不过,随着移动设备的屏幕、分辨率都越做越大,未来能用到响应式设计的地方可能越来越少,甚至网页的作用也可能被一部分APP所代替。

发表评论

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

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>