讨论响应式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设计在技术上的各方面的细节。
相关推荐
本资源——"响应式Web设计HTML5和CSS3实战(第二版)code"——包含了Ben Frain著作中的示例代码,帮助读者深入理解如何将这些技术应用到实际项目中。 HTML5作为下一代超文本标记语言,引入了许多新元素和API,优化...
《响应式Web图形设计》以创建响应式Web的角度,介绍了基础的HTML和CSS语法,并深入研究了响应式Web设计中色彩、布局、图像、排版、动画、视频和音频等方面的内容。, 《响应式Web图形设计》结构整、轻松易懂,能够...
HTML5和CSS3是现代Web开发的基石,它们极大地扩展了网页设计和开发的可能性,使得开发者可以构建功能丰富、响应式且视觉上引人入胜的网站。本教程"html5+css3从入门到精通"针对前端新手,旨在帮助初学者快速掌握这两...
本教程主要涵盖了Web前端开发中的核心技术和框架,包括HTML5、CSS3、Flex布局以及...通过实践这些课后练习,你将能更好地理解如何将HTML5、CSS3、Flex布局和Bootstrap结合起来,创建出高效、美观且响应式的Web页面。
本书“HTML5+CSS3从入门到精通”由Terry Felke-Morris撰写,旨在帮助初学者和有经验的开发者深入理解和掌握这两种技术。 HTML5作为第五代超文本标记语言,其主要改进包括: 1. 新增语义化标签:如、、、等,提高了...
《CSS3+HTML5+从入门到精通》是一本针对初学者和有一定基础的学习者编写的全面教程,旨在帮助读者掌握这两个现代Web开发的核心技术。HTML5和CSS3是构建现代网页和应用程序不可或缺的工具,它们带来了丰富的交互性和...
5. **媒体查询**:media queries实现了响应式设计,可以根据设备特性(如屏幕大小、分辨率等)调整布局。 学习HTML5+CSS3不仅能够提升网页的美观度,还能增强网页的功能性和可访问性。对于JavaWeb开发者来说,掌握...
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开,这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
例如,ch2可能涉及HTML5的基础语法,ch3可能讲解CSS3的选择器,ch5和ch6可能会介绍响应式设计与布局,ch7和ch9可能探讨更复杂的交互和动画效果。 总的来说,这本书提供了全面的HTML5和CSS3教程,不仅适用于初学者...
本文介绍了基于响应式Web设计的网页模板的设计与实现,该方法能够适应各种浏览设备环境,无需依赖特定的设备,为网站开发提供了一种高效的方法。 随着移动互联网的快速发展,移动设备逐渐普及,用户通过手机、平板...
在"HTML5+CSS3移动Web开发实战(第2版)"这本教材中,读者将深入学习如何利用这两门语言构建响应式、交互性强的移动端网站。 HTML5是超文本标记语言的最新版本,它引入了许多新特性,旨在提升网页的可编程性、交互...
HTML5和CSS3是现代网页开发的基石,它们极大地提升了网页的设计与功能实现能力。《HTML5+CSS3从入门到精通》这本书以其系统全面的内容,成为初学者学习这两项技术的理想教材。在这个压缩包中,包含了第17章和第19章...
本教程聚焦于四个核心的Web前端技术:HTML5、CSS3、Flexbox和Bootstrap,这些都是现代网页开发不可或缺的元素。 HTML5(HyperText Markup Language 5)是最新版本的HTML标准,它引入了许多新特性,提高了网页的互动...
CSS3新增了许多特效和选择器,如媒体查询(Media Queries)用于响应式设计,阴影效果(Box Shadow, Text Shadow),渐变(Gradients),过渡(Transitions)和动画(Animations)。"css"文件夹中的样式表文件展示了...
响应式布局是现代网页设计的关键技术,它使得网站在不同设备和屏幕尺寸下都能提供良好的用户体验。本课程聚焦于响应式布局中的一个核心组件——媒体查询(Media Queries),它是实现设备适应性的重要工具。通过学习...
响应式布局主要依赖于CSS3的Media Queries(媒体查询)和Flexible Box(弹性盒模型)这两种操作模式。Media Queries允许我们根据设备的特性,如宽度、高度、分辨率等,来应用不同的CSS样式。这样,网页的布局可以...
此外,这些案例可能覆盖了各种网页设计主题,如登录注册页面、新闻展示、电子商务界面、响应式布局等,这将帮助你了解在不同场景下如何灵活运用HTML5、CSS3和JavaScript。在实践中,你可以对照案例逐步分析和修改...
CSS3的媒体查询(media queries)实现了响应式设计,可以根据设备的不同特性(如屏幕尺寸、分辨率)来调整页面布局。此外,CSS3还支持过渡(transitions)、动画(animations)和3D变换,为网页添加了丰富的动态效果...