响应式Web设计与HTML5、CSS3入门

讨论响应式Web设计，不得不提两个部分的支持，分别是CSS3和Media Query。我们先从CSS3入手，CSS3是在CSS2.1定义规范核心上的改动，目前CSS3最终的specification还未最终定稿，但是这并不妨碍我们使用CSS3来支持响应式Web设计的相关工作。使用CSS3时，要注意由于目前市场占有率仍然很高的IE6,7,8这三个版本会无法支持CSS3的很多新特性，所以，我们应当谨慎使用使用CSS3的Experimental特性，而应该考虑使用对CSS2.1向下兼容的CSS特性。如果你的Web内容就是为了呈现HTML5最新特性所带来的效果的话，则可以不用有这种顾虑。下面这是一个CSS3在其几个新属性上的变化演示：

 

 

       如果你熟悉CSS2.1实现上述效果使用的Slide door设置左右PNG图片填充的手段，就会发现CSS3的革命性：第一，无需在CSS3属性中设置HTTP对图片的请求方式，第二，属性值的灵活调整，可以灵活的应对各种形状的要求，减少工作量；第三，允许追加指定浏览器兼容性，例如对CSS属性值添加-webkit-,-moz-,-chrome-之类的前缀，但是随着W3C对CSS3规范的日益完善，值得高兴的是，前端开发者设定这样的特殊兼容性的工作越来越少。关于CSS3在响应式Web上的诸多新特性，我会在以后其他文章里来专门讨论这部份内容。

 

       Media Query是响应式Web设计开发工作中，另外一个要必须掌握的技术，目前Media Query在浏览器上的兼容度要高很多，Firefox,Safari,Chrome,Opera,iOS Safari,IE等主流浏览器都能很好的支持Media Query。CSS3 Media Query模块是目前在特定移动设备上开发Web应用样式所必需的技术，比如如何访问移动设备屏幕可视窗口的宽度(viewport width)属性，开发者必须使用CSS3 Media Query。Media Query从技术成份上分析，其组成是比较简单的，是由一个媒体类型和若幹個检测判断设备媒体功能的表达式所组成，对应不同的设备，通过执行Media Query的判断检测来实现对特定属性的准确访问。我们可以通过下面的截图来简单了解一下Media Query的表达方式。

 

 

       上图的部份红色下划线标注的部份是CSS3 Media Query表达式，主要通过对屏幕viewport最小分辨率的判断来附加不同的CSS样式单。下面用一个更直观的例子来说明Media Query的作用。

 

       将这个CSS文件link到一个HTML5的页面，用IE9或Chrome24等新版浏览器打开页面，当我们手动缩放浏览器窗口大小时，会发现随着窗口的缩放，页面的背景颜色起了变化，这就是响应式Web设计里最简单的一个演示，随着浏览器viewport尺寸的改变，media query响应Web页面后呈现了不同的色彩。其实，CSS3 Media Query在HTML5页面中的作用就是与浏览器交互，从浏览器得到对应的True/False结果后，执行特定的CSS3样式加载，例如：上面这段CSS3的link代码中media属性就是通过Media Query和浏览器做交互的表现形式，通过and来做“与”判断后，加载对应的CSS文件。

       毫无疑问，CSS3和Media Query的配合当下就能提供给响应式Web设计良好的支持，满足用户在open web的全新环境下为跨屏幕，跨设备的内容浏览需求。本文介绍了HTML5，CSS3在响应式Web设计的大环境下的相关概念，其重要性和开发者所需要的几个基础制作工具。在以后的文章中，将有机会深入讨论响应式Web设计在技术上的各方面的细节。