本文共 1991 字,大约阅读时间需要 6 分钟。
Responsive网页设计无疑是网页设计中的一个热门话题。某种程度上,他将是一个最受欢迎的网页设计概念,因为随着网站用户日渐多样化的访问方法,比如说“iPad”、“iPhone”、“Android移动设备”、“平板电脑”、“台式机”以及“ 笔记本”等不同形式的显屏出现。这样我们以前那样的网页设计就无法在适合上述各种设备的浏览,这也给我们今后的网页设计工作提出一个新的概念——Responsive设计
Responsive网页设计的主要特点
- 该网站必须建立灵活的网格基础
- 引用到网站的图片必须是可伸缩的
1. 灵活的网格系统
网页的网格系统应用,他在网页设计中的概念越来越模糊。换句话说,你的网站必须包括一个灵活的网格系统,并不意味你的网站需要使用一个庞大的网格系统,比如说960s。所以在你的网页设计中定义一个你自己需要的列、列间距等参数,才是一个网页设计的最佳解决方案,自己定义的和现有的任何一个系统同样是灵活可变的
事实上,大多数现有的网格系统限制了我们自定义列的大小,和间距,换回来说,使用现有的网格系统,我们需要遵循他的使用模板原则才能生效,但这样一来往往对我们的使用有太多的限制,然而自己动手一个网格系统,又是一件棘手的事,而且也是一件费时的事。所以说,无论我们使用现有的网格还是自己自定义的网格系统,最主要的是要让他适合我们布局的大小和间距的需要
这样就意味着,我们需要放弃常用的“px”固定布局,而使用百分比或者“em”这样的流体布局来实现“web布局”。当然这样并不是说我们在设计软件中不能使用“px”,我们在设计页面的图片效果时,还是在“px”的基础上实现,因为我们只是在Web页面中使用一个相对单位来实现需要的网页布局。这样说或许有点模糊。我们可以换过来说“设计web页面的模型效果,我们还是使用“px”来定其大小与间距,只是在图片效果转成web页面效果时,才采用“百分比”或用“em”这样的相对单位来替代“px”,从而实现一种比较灵活的布局。”具体他们之间的区别,大家不妨移步到Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?查看他们之间的区别所在
2. 灵活的图片
这里所说的灵活的图片指是的图片的可收缩性,这一点也是Responsive设计中的另一个关键点。灵活的图像常常给网页设计师有点头痛,有点烦。因为载入是超大的图像时,我们在缩小显屏大小时,这些超大的图像就会破坏我们的布局。为了让更小的显屏和其小移动设备能显示更多的文本内容,我们需要缩小这些超大的图片,最早使用的是就是通地改变图片的width和height属性来实现。这样一来对于网页载入并不是一个很好的做法。这也将严重的影响你的网站形象。还好,随着网页设计的向前发展,我们看到网站上越来越少使用那些不必要的图片,但是目前,我们还是需要考虑如实来处理这样的一个问题,让这个超大图片在你的Responsive设计中并不会给你带来麻烦
就是使用CSS来控制,使用CSS中的“overflow:hidden”将超出的图片部分进行剪切,随着他的容器转变,以达到新的显示效果
从Responsive设计中三个特点来看,确实让人兴奋不起来,可是事实上,这将是一个良好的设计开始。良好的THML结构和一个灵活多变的布局,难道不让你觉得特别的新吗。在这样的一个日新月异的技术变化的大背景之下,需要灵活的布局更是势在必行。现在,让我们可以更好的适应更多的显屏 浏览的情况下,我们需要的是流体的,灵活的一种设计。Responsive设计迫使我们采取行动开始做这样的事情