3.4.4　自适应显示/隐藏页面内容

对于响应式Web设计，同比例缩放元素尺寸及调整页面结构布局是两个重要的响应方法。但是对于页面中的文字内容信息来说，则不能简单地以同比缩小或者调整布局结构的方法进行处理。对于手机等移动设备来说，在文字内容方面，已经有了很多最佳实践方式和指导原则：简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。

响应式Web设计的思想如下：

一方面要保证页面元素及布局具有足够的弹性，来兼容各类设备平台和屏幕尺寸；

另一方面则是增强可读性和易用性，帮助用户在任何设备环境中都能更容易地获取最重要的内容信息。

针对这个问题，我们可以使用下面这条样式代码来解决： display: none;

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

注意，不要使用visibility: hidden的方式，因为这只能使元素在视觉上不呈现；display属性则可帮助我们设置整块内容是否需要输出。

对初学者来说，响应式设计可能比较复杂，但是事实上它是很简单的。例如，下面示例通过简单的几步设计一个初步响应式页面效果。

第1步：通过Dreamweaver新建一个HTML5文档，在头部区域定义meta标签。大多数移动浏览器将HTML页面放大为宽视图（viewport）以符合屏幕分辨率。这里可以使用视图的meta标签来进行重置，让浏览器使用设备的宽度作为视图宽度并禁止初始的缩放。

第2步：IE8或者更早的浏览器并不支持Media Query。可以使用media-queries.js或者respond.js来为IE添加Media Query支持。

第3步：设计页面HTML结构。整个页面基本布局包括头部、内容、侧边栏和页脚等。头部为固定高度180像素，内容容器宽度是600像素，而侧边栏宽度是300像素，线框图如图3-25所示。      Header   

Tutorial by Myself (read related article)

text

text

第4步：使用Media Query。CSS3 Media Query是响应式设计的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页面。

当视图宽度小于或等于980像素时，如下规则将会生效。基本上，会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。 /* for 980px or less */ @media screen and (max-width: 980px) {    #pagewrap {        width: 94%;  }  #content {        width: 65%;  }  #sidebar {        width: 30%;  } }

第5步：为小于或等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。 /* for 700px or less */ @media screen and (max-width: 700px) {  #content {         width: auto;         float: none;  }  #sidebar {         width: auto;         float: none;  } }

第6步：对于小于等于480像素（手机屏幕）的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。 /* for 480px or less */ @media screen and (max-width: 480px) {  #header {        height: auto;  }  h1 {        font-size: 24px;  }  #sidebar {        display: none;  } }

第7步：根据个人喜好添加足够多的Media Query。上面三段样式代码仅仅展示了3个Media Query。Media Query的目的在于为指定的视图宽度指定不同的CSS规则，从而来实现不同的布局。演示效果如图3-26所示。  

提示　触屏设备已经成为主流。虽然目前多数触屏设备（如手机）还是小屏幕，但是市场上越来越多的大屏幕设备也开始使用触屏技术。且不说iPad一类的平板电脑，就连一些笔记本和台式机也加入了这一行列，如HP Touchsmart tm2t既使用传统的键鼠设备，同时也加入了触屏技术。

相比于传统的基于鼠标指针的互动，触屏技术显然带来了截然不同的交互方式与相应的设计规范，两者又有各自所适用的领域。所幸，要使我们的设计方案同时满足这两类设备的规范并非难事，只是有些地方需要注意。比如，触屏设备无法反映CSS定义的悬停行为及相应的样式，因为它没有鼠标指针的概念，手指点击就是单击行为。因此，不要让任何功能依赖于对悬停状态的触发。

一般建议设计既要有利于改进针对触屏设备的设计方式，同时又不会削弱传统键鼠设备上的用户体验。例如，放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手操作，而左手负责握持设备；这样，放在右侧的导航列表既方便右手的点击，又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。