`
xh584990686
  • 浏览: 11890 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

响应式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设计在技术上的各方面的细节。 

 

分享到:
评论

相关推荐

    响应式web设计HTML5和css3实战(第二版)code

    本资源——"响应式Web设计HTML5和CSS3实战(第二版)code"——包含了Ben Frain著作中的示例代码,帮助读者深入理解如何将这些技术应用到实际项目中。 HTML5作为下一代超文本标记语言,引入了许多新元素和API,优化...

    响应式Web图形设计

    《响应式Web图形设计》以创建响应式Web的角度,介绍了基础的HTML和CSS语法,并深入研究了响应式Web设计中色彩、布局、图像、排版、动画、视频和音频等方面的内容。, 《响应式Web图形设计》结构整、轻松易懂,能够...

    html5+css3从入门到精通

    HTML5和CSS3是现代Web开发的基石,它们极大地扩展了网页设计和开发的可能性,使得开发者可以构建功能丰富、响应式且视觉上引人入胜的网站。本教程"html5+css3从入门到精通"针对前端新手,旨在帮助初学者快速掌握这两...

    Web前端技术项目式教程(HTML5+CSS3+Flex+Bootstrap)-课后练习答案.zip

    本教程主要涵盖了Web前端开发中的核心技术和框架,包括HTML5、CSS3、Flex布局以及...通过实践这些课后练习,你将能更好地理解如何将HTML5、CSS3、Flex布局和Bootstrap结合起来,创建出高效、美观且响应式的Web页面。

    HTML5+CSS3从入门到精通 源码和示例

    本书“HTML5+CSS3从入门到精通”由Terry Felke-Morris撰写,旨在帮助初学者和有经验的开发者深入理解和掌握这两种技术。 HTML5作为第五代超文本标记语言,其主要改进包括: 1. 新增语义化标签:如、、、等,提高了...

    CSS3+HTML5+从入门到精通-PDF中文教程

    《CSS3+HTML5+从入门到精通》是一本针对初学者和有一定基础的学习者编写的全面教程,旨在帮助读者掌握这两个现代Web开发的核心技术。HTML5和CSS3是构建现代网页和应用程序不可或缺的工具,它们带来了丰富的交互性和...

    HTML5+CSS3从入门到精通.zip

    5. **媒体查询**:media queries实现了响应式设计,可以根据设备特性(如屏幕大小、分辨率等)调整布局。 学习HTML5+CSS3不仅能够提升网页的美观度,还能增强网页的功能性和可访问性。对于JavaWeb开发者来说,掌握...

    CSS3 +HTML5入门到精通

    【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开,这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...

    HTML5+CSS3 Web前端开发-唐四薪版-2018.5 源代码

    例如,ch2可能涉及HTML5的基础语法,ch3可能讲解CSS3的选择器,ch5和ch6可能会介绍响应式设计与布局,ch7和ch9可能探讨更复杂的交互和动画效果。 总的来说,这本书提供了全面的HTML5和CSS3教程,不仅适用于初学者...

    基于响应式WEB设计的网页模板的设计与实现_张树明.pdf

    本文介绍了基于响应式Web设计的网页模板的设计与实现,该方法能够适应各种浏览设备环境,无需依赖特定的设备,为网站开发提供了一种高效的方法。 随着移动互联网的快速发展,移动设备逐渐普及,用户通过手机、平板...

    HTML5+CSS3移动Web开发实战(第2版)-电子教案.rar

    在"HTML5+CSS3移动Web开发实战(第2版)"这本教材中,读者将深入学习如何利用这两门语言构建响应式、交互性强的移动端网站。 HTML5是超文本标记语言的最新版本,它引入了许多新特性,旨在提升网页的可编程性、交互...

    《HTML5+CSS3从入门到精通》源码17和19章

    HTML5和CSS3是现代网页开发的基石,它们极大地提升了网页的设计与功能实现能力。《HTML5+CSS3从入门到精通》这本书以其系统全面的内容,成为初学者学习这两项技术的理想教材。在这个压缩包中,包含了第17章和第19章...

    Web前端技术项目式教程(HTML5+CSS3+Flex+Bootstrap)-PPT课件.rar

    本教程聚焦于四个核心的Web前端技术:HTML5、CSS3、Flexbox和Bootstrap,这些都是现代网页开发不可或缺的元素。 HTML5(HyperText Markup Language 5)是最新版本的HTML标准,它引入了许多新特性,提高了网页的互动...

    零基础如何快速学好web前端,HTML5 CSS3 3D魔方拼图网页开发源码

    CSS3新增了许多特效和选择器,如媒体查询(Media Queries)用于响应式设计,阴影效果(Box Shadow, Text Shadow),渐变(Gradients),过渡(Transitions)和动画(Animations)。"css"文件夹中的样式表文件展示了...

    Web-前端html+css从入门到精通 207. 响应式布局之媒体查询语法.zip

    响应式布局是现代网页设计的关键技术,它使得网站在不同设备和屏幕尺寸下都能提供良好的用户体验。本课程聚焦于响应式布局中的一个核心组件——媒体查询(Media Queries),它是实现设备适应性的重要工具。通过学习...

    Web-前端html+css从入门到精通 208. 响应式布局之两种操作模式.zip

    响应式布局主要依赖于CSS3的Media Queries(媒体查询)和Flexible Box(弹性盒模型)这两种操作模式。Media Queries允许我们根据设备的特性,如宽度、高度、分辨率等,来应用不同的CSS样式。这样,网页的布局可以...

    HTML5+CSS3+JavaScript网页设计案例课堂-课本源代码.zip

    此外,这些案例可能覆盖了各种网页设计主题,如登录注册页面、新闻展示、电子商务界面、响应式布局等,这将帮助你了解在不同场景下如何灵活运用HTML5、CSS3和JavaScript。在实践中,你可以对照案例逐步分析和修改...

    HTML5与CSS3基础教程 第八版 中文版 高清 PDF

    CSS3的媒体查询(media queries)实现了响应式设计,可以根据设备的不同特性(如屏幕尺寸、分辨率)来调整页面布局。此外,CSS3还支持过渡(transitions)、动画(animations)和3D变换,为网页添加了丰富的动态效果...

Global site tag (gtag.js) - Google Analytics