了解Responsive网页设计的三个特性

Responsive网页设计无疑是网页设计中的一个热门话题。某种程度上,他将是一个最受欢迎的网页设计概念,因为随着网站用户日渐多样化的访问方法,比如说“iPad”、“iPhone”、“Android移动设备”、“平板电脑”、“台式机”以及“ 笔记本”等不同形式的显屏出现。这样我们以前那样的网页设计就无法在适合上述各种设备的浏览,这也给我们今后的网页设计工作提出一个新的概念——Responsive设计

下面让我们一起来探讨一下Responsive网页设计的意义和原则,以及需要了解的相关元素。

Responsive网页设计的主要特点

Responsive网页设计要考虑其元素布局的秩序,而且还需做到“有求必应”,那就需要满足三个条件。网页设计师Ethan Marcotte是这样描述的:

  1. 该网站必须建立灵活的网格基础
  2. 引用到网站的图片必须是可伸缩的
  3. 不同的显示风格,需要在media queries上写不同的样式

CSS-Tricks在这方面就是一个很好的实例。

了解Responsive网页设计的三个特性

大家注意了,最重要的是上面所说的三种功能都是为了实现一个真正的web设计发生的。也就是说少了任何一个功能,那么就不能称作是合格的“Responsive”网页设计。接下来,让我们更深入的了解这三个特点,为今后的Responsive设计打下一定的理论性基础。

灵活的网格系统

网页的网格系统应用,他在网页设计中的概念越来越模糊。换句话说,你的网站必须包括一个灵活的网格系统,并不意味你的网站需要使用一个庞大的网格系统,比如说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?查看他们之间的区别所在。

St Paul’s School网站就是使用了这种布局,可以随着显屏窗口大小改变布局,而且布局中的变化还加注了一些平滑流畅的动画效果,大家不仿看看:

了解Responsive网页设计的三个特性

灵活的图片

这里所说的灵活的图片指是的图片的可收缩性,这一点也是Responsive设计中的另一个关键点。灵活的图像常常给网页设计师有点头痛,有点烦。因为载入是超大的图像时,我们在缩小显屏大小时,这些超大的图像就会破坏我们的布局。为了让更小的显屏和其小移动设备能显示更多的文本内容,我们需要缩小这些超大的图片,最早使用的是就是通地改变图片的width和height属性来实现。这样一来对于网页载入并不是一个很好的做法。这也将严重的影响你的网站形象。还好,随着网页设计的向前发展,我们看到网站上越来越少使用那些不必要的图片,但是目前,我们还是需要考虑如实来处理这样的一个问题,让这个超大图片在你的Responsive设计中并不会给你带来麻烦。

上面说的使用html属性来控制图片的缩放并不合适,那么还有另外一种缩放图片的方法,就是使用CSS来控制,使用CSS中的“overflow:hidden”将超出的图片部分进行剪切,随着他的容器转变,以达到新的显示效果。

其实这种方法也不是最佳的解决方法,我们曾在《Responsive设计和CSS3 Media Queries的结合》中也探讨了如何实现图片的可伸缩性:

      img {
            max-width: 100%;
            width: 100%;
            height: auto;
          }

当然,如果有些图片不是很得要的话,我们还可以考虑使用“Media Queries”在不需要图片显示的情况下,把图片隐藏起来。Thinkvitamin.com有关于这个图片的应用就是非常棒的一个实例:

了解Responsive网页设计的三个特性

Media Queries

Media QueriesCSS3之中的一个新增属性,也是Responsive设计中令人最兴奋的一个功能。

通常情况下,我们有一个老的思路,就是我们的网站只能一个适合的样式,如果你想动态的改变样式,就需要借助其他的语言来帮忙,但这个Media Queries出现,可以让我们使用相同的HTML结构,创建多个布局,并且还可以实现多个不同的页面效果,从而使用网站适合各个不同显屏的浏览器浏览。有关于Media Queries的详细使用,大家点击本站的相关教程。

大家需要注意一点Media Queries不是专门的解决移动设备和平板设备的布局。相反,Media Queries和Responsive的配合,能让我们觉得我们的设计能适应不同的屏幕大小显示。有关于这方面的实例介绍,大家感兴趣的话可以点阅——《Responsive设计和CSS3 Media Queries的结合

从Responsive设计中三个特点来看,确实让人兴奋不起来,可是事实上,这将是一个良好的设计开始。良好的THML结构和一个灵活多变的布局,难道不让你觉得特别的新吗。在这样的一个日新月异的技术变化的大背景之下,需要灵活的布局更是势在必行。现在,让我们可以更好的适应更多的显屏 浏览的情况下,我们需要的是流体的,灵活的一种设计。Responsive设计迫使我们采取行动开始做这样的事情。

虽然Responsive设计还不是最终的所有解决方案,但他开始引领我们往这个方向行进,让我们朝着正确方向迈出了一步。很多国外网站都开始在使用这种Responsive的设计,我也希望大家能开始使用起来,让自己也追上这技术的前沿。

原文链接:https://www.w3cplus.com/css3/understanding-the-elements-of-responsive-web-design

发表评论

登录后才能评论