移动互联网时代到来了。《响应式Web设计:HTML5和CSS3实战》将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来,为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。不仅讨论了媒体查询、流式布局、相对字体、响应式媒体,更将HTML5和CSS3的相关知识点一并讲解,是学习*新Web设计技术****的佳作。
《响应式Web设计:HTML5和CSS3实战》适合各个层次的Web开发和设计人员阅读。 响应式Web设计-HTML5和CSS3实战_(英)弗雷恩_人民邮电出版社_

第1章 HTML5、CSS3及响应式设计入门
1.1 为什么智能手机很重要(而老版的IE不再重要)
1.2 响应式设计一定是*佳选择吗
1.3 响应式网页设计的定义
1.4 为什么要在响应式设计上停滞不前
1.5 响应式网页设计示例
1.5.1 下载视口调试工具
1.5.2 在线创意源泉
1.6 为什么HTML5很**
1.6.1 省时省力
1.6.2 新增了语义化标签元素
1.7 CSS3为响应式设计和更多创新奠定了基础
1.7.1 底线:CSS3不破坏任何东西
1.7.2 CSS3如何解决日常设计问题
1.8 看呐,不用图片
1.9 HTML5和CSS3现在就能用吗
1.10 响应式网页设计不是灵丹妙药
1.11 引导客户:网站不必在所有浏览器中表现一致
1.12 小结
第2章 媒体查询:支持不同的视口
2.1 现在就能使用媒体查询
2.2 为什么响应式设计需要媒体查询
2.2.1 媒体查询语法
2.2.2 媒体查询能检测那些特性
2.2.3 用媒体查询改造我们的设计
2.2.4 加载媒体查询的*佳方法
2.3 我们的**个响应式设计
2.3.1 我们的设计是固定宽度的,不要惊讶
2.3.2 响应式设计中要保证图片尽可能精简
2.3.3 小视口下的内容剪切
2.4 阻止移动浏览器自动调整页面大小
2.5 针对不同视口宽度修正设计
2.6 响应式设计中内容始终优先
2.7 媒体查询只是必要条件之一
2.8 小结
第3章 拥抱流式布局
3.1 固定布局经不起未来考验
3.2 为什么响应式设计需要百分比布局
3.3 将网页从固定布局修改为百分比布局
3.3.1 需要牢记的公式
3.3.2 设置百分比元素的上下文
3.3.3 必须时刻牢记上下文
3.4 用em替换px
3.5 弹性图片
3.5.1 让图片随视口缩放
3.5.2 为特定图片指定特定规则
3.5.3 给弹性图片设置阈值
3.5.4 **全能的max-width属性
3.6 为不同的屏幕尺寸提供不同的图片
3.7 流动网格布局和媒体查询的默契配合
3.8 CSS网格系统
3.9 小结
第4章 响应式设计中的HTML5
4.1 HTML5的哪些部分现在就能用
4.1.1 大多数网站可以用HTML5编写
4.1.2 腻子脚本和Modernizr
4.2 如何编写HTML5网页
4.2.1 HTML5的精简之道
4.2.2 HTML5标签的合理写法
4.2.3 伟大的标签万岁
4.2.4 HTML的废弃零件
4.3 HTML5的全新语义化元素
……
第5章 CSS3:选择器、字体和颜色模式
5.1 CSS3给前端开发人员带来了什么
5.1.1 Internet Explorer 6到8对CSS3的支持
5.1.2 使用CSS3设计和开发页面
5.2 CSS规则解析
5.3 私有前缀及其用法
5.4 快速而有效的CSS技巧
5.4.1 CSS3多栏布局
5.4.2 文字换行
5.5 CSS3的新增选择器及其用法
5.5.1 CSS3属性选择器
5.5.2 CSS3结构伪类
5.5.3 对伪元素的修正
5.6 自定义网页字体
5.6.1 @font-face规则
5.6.2 使用@font-face嵌入网页字体
5.7 帮帮我,标题模糊怎么办
5.8 新的CSS3颜色格式和透明度
5.8.1 RGB颜色
5.8.2 HSL颜色
5.8.3 针对IE6、IE7和IE8提供备用颜色值
5.8.4 透明通道
5.9 小结
第6章 用CSS3创造令人惊艳的美
6.1 文字阴影
6.1.1 HEX、HSL或RGB颜色都可以
6.1.2 px、em或rem都行
6.1.3 取消文字阴影
6.1.4 制作浮雕文字阴影效果
6.1.5 多重文字阴影
6.2 盒阴影
6.2.1 内阴影
6.2.2 多重阴影
6.3 背景渐变
6.3.1 线性背景渐变
6.3.2 径向背景渐变
6.3.3 重复渐变
6.4 背景渐变图案
6.5 CSS3的响应性
6.6 组合使用CSS3属性
6.7 多重背景图片
6.7.1 背景图片大小
6.7.2 背景图片位置
6.7.3 背景属性的缩写语法
6.8CSS特性
6.9 可缩放图标:响应式设计中的**选择
6.10 小结
第7章 CSS3过渡、变形和动画
7.1 什么是CSS3过渡以及如何使用它
7.1.1 过渡相关的属性
7.1.2 响应式网站中的有趣过渡
7.2 CSS3的2D变形
7.3 尝试CSS3的3D变形
7.3.1 分析3D变形效果
7.3.2 3D变形尚未成熟
7.4 CSS3动画效果
7.5 小结
第8章 用HTML5和CSS3征服表单
8.1 HTML5表单
8.1.1 理解HTML5表单中的元素
8.1.2 placeholder
8.1.3 required
8.1.4 autofocus
8.1.5 autocomplete
8.1.6 list(及对应的datalist元素)
8.1.7 HTML5的新输入类型
8.1.8 日期和时间输入类型
8.2 如何给不支持新特性的浏览器打补丁
8.3 使用CSS3美化HTML5表单
8.4 小结
第9章 解决跨浏览器问题
9.1 渐进增强与优雅降级
9.2 该不该修复老版本IE
9.2.1 统计数据(再看看世界的变化)
9.2.2 个人选择
9.3 前端的瑞士军刀:Modernizr
9.3.1 使用Modernizr辅助修正样式问题
9.3.2 使用Modernizr让老版本IE支持HTML5元素
9.3.3 给IE6、7、8追加min/max媒体查询功能
9.3.4 使用Modernizr按需加载资源
9.4 必要时将导航链接转换为下拉菜单
9.5 高分辨率设备(未来趋势)
9.6 小结

序
蒂姆·伯纳斯?李在1991年制作并发布了**个网站,如今刚刚过去21个年头。在这21年里,计算机和互联网快速发展,这个世界的面貌也日新月异。在这个过程中,网页设计从无到有,从简单渐至专业,从可有可无变为广受关注。网页设计方法也在跟随时代不断创新,从*初简单的文字排版,到表格布局,再到DIV+CSS,直到现在广为流行的网格布局、流式布局等,设计师和***们一直致力于为全球网民提供更好的设计观感和使用体验。
iOS和Android的发布,掀起了移动互联网的浪潮,智能手机、平板电脑、智能家电等新设备层出不穷,我们的世界变得更加精彩纷呈。但这却给网页设计带来了新的挑战,在面对形形色色的终端设备、千差万别的屏幕分辨率,以及良莠不齐的网络连接质量时,目前的设计方法显得力不从心。我们无法预料用户的设备和网络状况,更不可能为每种设备专门设计一套网站,那么在移动互联网时代,如何创新为用户提供更好的设计和体验呢?
2010年5月25日,伊桑?马科特发表在A List Apart上的一篇文章,为我们打开了思路。在这篇名为《Responsive
Web
Design》的文章中,伊桑?马科特将三种已有的技术整合在一起,提出了响应式网页设计的概念,用以解决我们当前遇到的设计难题。响应式网页设计概念一经提出就大受欢迎(当然也有争议),很多设计师和***纷纷实践并完善这种理念。两年多的时间里,涌现出了越来越多的响应式网站,针对响应式设计的工具和资源也日渐丰富。截至目前,响应式设计是使用一套代码为各类设备提供良好设��效果和使用体验的*佳设计方法。
你肯定对响应式设计有所耳闻,也可能看过一些响应式设计的技巧或相关文章,但它们都零零散散不成体系,无法让你真正理解并掌握响应式设计,也无法指导你立即开始响应式设计的实践。这本书将会带你系统地学习响应式网页设计的方法论,书中涵盖了响应式设计的思想、方法、工具、技巧、HTML5、CSS3、相关资源,以及针对老版本浏览器的兼容方案等内容,并以实际案例循序渐进地讲解了如何创建一个优雅**易于维护的响应式网站。希望这些正是你所需要的。
“得功有法,秉一应万”,这是太极拳修炼的目标,我想也可以作为响应式设计的目标。修炼好响应式设计这门功夫,能够让你安然自在,以一应万。元芳,潜心修炼吧!
感谢裕波、杨海玲老师及朱巍老师,让我有机会翻译本书。非常感谢图灵各位编辑的辛勤工作,尤其感谢李松峰老师的细心指导。另外要感谢图灵社区,我在这里受益匪浅。*后,感谢我的老婆,本书的翻译离不开她的支持、监督与参谋。
我在翻译本书时尽力保证信与达,雅则不敢奢望。翻译中的错误在所难免,欢迎广大读者指正。如果对本书有任何意见、建议或想法,请发送邮件至wyqbailey@gmail.com或反馈至图灵社区。
王永强
2012年10月 成都

前端设计人员**教程
图文并茂,轻松掌握*新设计技术
全面应用HTML5和CSS3,一步跨入*前沿