HTML5、CSS3与响应式Web设计入门
如果你熟悉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设计在技术上的各方面的细节。
【HTML5、CSS3与响应式Web设计入门】相关文章
2. 响应式web设计(Responsive web design)三步曲
3. HTML5、CSS3应用教程之 跟DIV说Bey!Bey!
6. Adobe为Web设计人员推出开源文本编辑器Brackets
本文来源:https://www.51html5.com/a3740.html
﹝HTML5、CSS3与响应式Web设计入门﹞相关内容
- 响应式设计最好的5个国外设计工具推荐
- 用CSS3设计响应式导航菜单
- 解耦 HTML、CSS和JavaScript
- 一个跨浏览器的响应式设计辅助工具类库 - CSS Browser Selector +
- 用于响应式设计的9个CSS技巧
- CSS Transition (CSS过渡效果)入门
- TRAFFIC现已提供HTML5、安卓和黑莓下载
- HTML5、Native或混合型应用开发全接触
- CSS3动画效果入门
- WebApp UI框架App.js的入门介绍和使用手册