小结:响应式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中一些比较常用的标签讲解了一番, 内容看起来不难,  语言还是挺有趣的

posted @ 2013-06-14 16:02  CodingMonkey  阅读(580)  评论(0编辑  收藏  举报