小结:响应式Web设计(HTML5和CSS3实战)
作者主要传达的思想是: 利用HTML5更富有语义的标签和CSS3优秀的新特性,通过媒体查询与流式布局相结合, 实现精简的响应式网站。
第一章, 讲述了HTML5和CSS3带来的便利, 使开发者更高效的开发和维护网站,同时作者也传达着“渐进增强”的理念,这个在整本书中都可以体会到。
第二章,这一章主要介绍CSS3媒体查询模块,列举一个简单的媒体查询:
@media screen and (max-width:960px){ body{ background-color: orange; } } @media screen and (max-width:768px){ body{ background-color: green; } } //代码的意思是:对于视口大小在960px之内的时候背景显示为橘黄色, 如果小于768px的时候新的样式(绿色背景)会覆盖前面的样式。
例外讨论到,编写页面标签是应该遵守“内容优先”的原则。
第三章,介绍了将固定布局转换为流式布局的公式:目标元素宽度÷上下文元素宽度 = 目标比宽度(结果尽量多保留几位小数),设置弹性图片:
img{ max-width: 100%; height: auto; }
还可以利用PHP脚本生成不同尺寸的图片,详情猛戳:Adaptive-images
第四章,简要的介绍的一些比较常用的HTML5标签, 推荐了一款polyfill--Modernizr, 使不支持HTML5的浏览器兼容。
第五章,介绍了CSS3中一些新的属性选择器,还有颜色模式和透明通道,略过。。
第六章,讲了CSS3中的一些新的属性,像box-shadow, text-shadow以及 gradient(渐变)。
第七章,CSS3过渡变形和强大的动画:
过渡具有四个属性: transition-property(要过渡的CSS属性名称), transition-duration(效果持续的时间), transition-timing-function(速度如何变化:ease, linear or cubic-bezier), transition-delay(可选, 过渡开始时的延迟时间)
变形包括:scale(缩放), translate(移动), rotate(旋转), skew(沿X和Y轴对元素进行斜切), matrix(以像素精度来控制变形效果)
CSS3动画由两部分组成: 关键帧的声明 + 动画属性中使用声明。例如:
@keyframe warning{ 0%{ text-shadow: 0 0 5px #000; } 50%{ text-shadow: 0 0 5px #999; } 100%{ text-shadow: 0 0 5px #FFF; } }
h5{ animation: warning 1.5s infinite ease; }
第八章, 介绍HTML5中强大的表单, 这个基本跟w3school上的教程类似。
第九章, 跨浏览器解决方案-采用Mondernizr
总体来说, 这本书对响应式网站的建设简单的介绍了下, 对HTML5和CSS3中一些比较常用的标签讲解了一番, 内容看起来不难, 语言还是挺有趣的