个人主页网站制作:响应式网站设计对于内容显示的思路

呼应式显示或隐藏内容

通过前文的学习,我们现已了解到,关于呼应式Web设计,同比例缩减元素尺寸以及调整页面结构布局,是两个重要的方式方法。可是关于页面中的文字内容信息来说,则不能简略的只从“同比缩小”和“调整布局结构”这两方面去向理。关于手机等移动设备来说,在文字内容方面,现已有了很多最佳实践方式和辅导原则:简化的导航、更容易聚焦的内容、以信息列表替代传统的多行案牍内容等。

呼应式Web设计的思维,一方面要保证页面元素及布局具有足够的弹性,来兼容各类设备平台和屏幕尺寸;另外一方面,则是增强可读性和易用性,协助用户在任何设备环境中都能更容易的获取最重要的内容信息。

有一条样式代码,我们现已使用了多年:

?

1

display:none;

我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素,也能够使用前文的方法,通过JS判断其时硬件屏幕规格,在小屏幕设备的状况下直接为需要隐藏的元素添加东西类class。比如,关于手机类设备,我们可以隐藏掉大块的文字内容区,而只显示一个简略的导航结构,其间的导航元素可以指向详细内容页面。

留意,不要使用visibility: hidden的方式,因为这只能使元素在视觉上不做呈现;display属性则可协助我们设置整块内容是否需要被输出。关于移动设备来说,防止这些没必要要的资源糟蹋仍是很重要的。我们来看一个简略的示例:

图中上半部分是大屏幕设备所显示的完好页面,下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Left Sidebar Content |Right Sidebar Content

 

 

Main Content

 

 

A Left Sidebar

 

 

 

A Right Sidebar

下面是默许的主样式表,其间,我们要隐藏掉链接导航部分(sidebar-nav),因为默许样式适用的设备屏幕会足够大,足够显示包括两个侧边栏在内的所有内容。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#content{

 width:54%;

 float:left;

 margin-right:3%;

}

 

#sidebar-left{

 width:20%;

 float:left;

 margin-right:3%;

}

 

#sidebar-right{

 width:20%;

 float:left;

}

.sidebar-nav{display:none;}

下面是用于小屏幕移动设备的样式表代码。现在,我们要隐藏掉两个侧边栏,并使sidebar-nav显示出来。借助JavaScript,当用户点击sidebar-nav中的链接时,对应的侧边栏可以恢复显示。当然,触发恢复显示的方式有很多种,即可以通过JS改变侧边栏的display属性值,也能够为其添加额定的布局样式。

?

1

2

3

4

5

6

7

8

9

10

11

12

#content{

 width:100%;

}

 

#sidebar-left{

 display:none;

}

 

#sidebar-right{

 display:none;

}

.sidebar-nav{display:inline;}

现在,我们的页面现已可以跟着设备和屏幕规格的变更,呼应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。特别是关于手机设备,我们还要在实践过程当中留意一些该类设备共有的设计辅导原则。比如,针对手机设备,使用一个特定的样式,将页面原本的文字导航元素变为更容易操作的图标形式。下面的一些文章资源可作参考阅读:

Mobile Web Design Trends For 2009

7 Usability Guidelines for Websites on Mobile Devices

触屏与鼠标

触屏设备现已成为干流。虽然现在大都触屏设备仍是小屏幕类型的产品,比如手机,可是市场上愈来愈多的大屏幕设备也开始使用触屏技能;且不说iPad一类的平板电脑,就连一些笔记本和台式机也加入了这一行列。比如HP Touchsmart tm2t,即便用传统的键鼠设备,同时也加入了触屏技能。

相比于传统的基于鼠标指针的互动,触屏技能显然带来了判然不同的交互方式与相应的设计规范;两者又有各自所适用的领域。所幸,要使我们的设计方案同时满足这两类设备的规范,并不是一件难事,只是有些当地需要留意。比如,触屏设备无法反映CSS界说的hover行为及相应的样式,因为它没有鼠标指针的概念,手点拨击就是click行为。所以不要让任何功用依赖于对hover状态的触发。


»

相关阅读