公司网站搭建

2020-12-28 22:42 admin

公司网站搭建:响应式Web设计 (豆瓣)

随着iPad mini的发布,又一个新的屏幕尺寸诞生了。用不着全面统计,你就会发现移动互联网时代众多的屏幕规格,从智能手机的3、4、5英寸,到平板电脑的7、8、9、10英寸,再到笔记本和台式机的13至30英寸,绝非目前单一的固定或流式布局所能应付。于是,响应式设计应运而生,而且它也将成为移动互联网时代前端设计与开发人员的一门必修课。

本书堪称学习响应式Web设计的难得佳作。它不仅全面、细致、图文并茂地介绍了响应式设计相关的技术,比如媒体查询、流式布局、弹性媒体和弹性字体等,还把近几年来Web设计领域公认的最佳设计理念有机地融入到了实例当中,比如移动先行(Mobile First)、渐进增强、平稳退化、无障碍设计等。更加难得的是,本书以设计跨屏幕的网页(响应式设计)为出发点,以点带面,把如今Web设计领域两大标准的最新版本HTML5和CSS3也纳入其中...


随着iPad mini的发布,又一个新的屏幕尺寸诞生了。用不着全面统计,你就会发现移动互联网时代众多的屏幕规格,从智能手机的3、4、5英寸,到平板电脑的7、8、9、10英寸,再到笔记本和台式机的13至30英寸,绝非目前单一的固定或流式布局所能应付。于是,响应式设计应运而生,而且它也将成为移动互联网时代前端设计与开发人员的一门必修课。

本书堪称学习响应式Web设计的难得佳作。它不仅全面、细致、图文并茂地介绍了响应式设计相关的技术,比如媒体查询、流式布局、弹性媒体和弹性字体等,还把近几年来Web设计领域公认的最佳设计理念有机地融入到了实例当中,比如移动先行(Mobile First)、渐进增强、平稳退化、无障碍设计等。更加难得的是,本书以设计跨屏幕的网页(响应式设计)为出发点,以点带面,把如今Web设计领域两大标准的最新版本HTML5和CSS3也纳入其中,读者在掌握先进设计方法的同时也能掌握最新的设计技术(比如使用新的HTML5结构化语义标记、嵌入媒体、响应式视频,以及CSS3的新选择器、特效、过渡、变形和动画等),从而可以免除重复学习新标准之苦,让自己一步跨入Web设计领域的最前沿。无论你想学习响应式Web设计,还是学习HTML5和CSS3的实际应用,本书都能满足你的需要,是毋庸置疑的明智之选。

说到底,响应式Web设计并非一门独立的技术,而只是现有技术的一个组合应用。只要有一点HTML和CSS基础的读者都能顺利地掌握它。对于中、高级的前端设计和开发人员,翻阅本书也有助于理清自己的知识脉络,对这个新的设计理念获得更全面、深入的理解和把握。

习惯移动阅读的读者,可访问图灵社区,购买本书电子版:http://www.ituring.com.cn/book/1055


Ben Frain是一名具有十多年经验的网页设计师和前端工程师,直接与世界各地的客户和设计机构并肩工作。同时他还是一名技术记者,定期为一些关注Mac平台、前沿科技、网页设计和航空技术的刊物撰稿。

在此之前,他曾是一名怀才不遇的(而且谦虚谨慎的)电视演员,毕业于索尔福德大学的媒体与表演专业。他写了四部(自认为)同样被低估的剧本,而且始终心怀能卖出一部的信念(尽管不像最初那么强烈了)。

工作之余,在身体(和妻子)允许的情况下,他喜欢玩室内足球。 他的个人网站是www.benfrain.com,Twitter地址是twitter.com/benfrain。


第1章 HTML5、CSS3及响应式设计入门 1
1.1 为什么智能手机很重要(而老版的IE不再重要) 2
1.2 响应式设计一定是最佳选择吗 3
1.3 响应式网页设计的定义 3
1.4 为什么要在响应式设计上停滞不前 4
1.5 响应式网页设计示例 4
· · · · · · ()
第1章 HTML5、CSS3及响应式设计入门 1
1.1 为什么智能手机很重要(而老版的IE不再重要) 2
1.2 响应式设计一定是最佳选择吗 3
1.3 响应式网页设计的定义 3
1.4 为什么要在响应式设计上停滞不前 4
1.5 响应式网页设计示例 4
1.5.1 下载视口调试工具 4
1.5.2 在线创意源泉 11
1.6 为什么HTML5很优秀 12
1.6.1 省时省力 12
1.6.2 新增了语义化标签元素 13
1.7 CSS3为响应式设计和更多创新奠定了基础 13
1.7.1 底线:CSS3不破坏任何东西 14
1.7.2 CSS3如何解决日常设计问题 14
1.8 看呐,不用图片 17
1.9 HTML5和CSS3现在就能用吗 20
1.10 响应式网页设计不是灵丹妙药 20
1.11 引导客户:网站不必在所有浏览器中表现一致 21
1.12 小结 22
第2章 媒体查询:支持不同的视口 23
2.1 现在就能使用媒体查询 23
2.2 为什么响应式设计需要媒体查询 24
2.2.1 媒体查询语法 24
2.2.2 媒体查询能检测那些特性 26
2.2.3 用媒体查询改造我们的设计 27
2.2.4 加载媒体查询的最佳方法 27
2.3 我们的第一个响应式设计 27
2.3.1 我们的设计是固定宽度的,不要惊讶 28
2.3.2 响应式设计中要保证图片尽可能精简 32
2.3.3 小视口下的内容剪切 33
2.4 阻止移动浏览器自动调整页面大小 34
2.5 针对不同视口宽度修正设计 37
2.6 响应式设计中内容始终优先 38
2.7 媒体查询只是必要条件之一 42
2.8 小结 42
第3章 拥抱流式布局 43
3.1 固定布局经不起未来考验 43
3.2 为什么响应式设计需要百分比布局 44
3.3 将网页从固定布局修改为百分比布局 44
3.3.1 需要牢记的公式 45
3.3.2 设置百分比元素的上下文 47
3.3.3 必须时刻牢记上下文 52
3.4 用em替换px 54
3.5 弹性图片 56
3.5.1 让图片随视口缩放 56
3.5.2 为特定图片指定特定规则 58
3.5.3 给弹性图片设置阈值 59
3.5.4 超级全能的max-width属性 61
3.6 为不同的屏幕尺寸提供不同的图片 61
3.7 流动网格布局和媒体查询的默契配合 66
3.8 CSS网格系统 66
3.9 小结 72
第4章 响应式设计中的HTML5 73
4.1 HTML5的哪些部分现在就能用 73
4.1.1 大多数网站可以用HTML5编写 74
4.1.2 腻子脚本和Modernizr 74
4.2 如何编写HTML5网页 75
4.2.1 HTML5的精简之道 76
4.2.2 HTML5标签的合理写法 76
4.2.3 伟大的 a 标签万岁 77
4.2.4 HTML的废弃零件 77
4.3 HTML5的全新语义化元素 78
4.3.1 section 78
4.3.2 nav 79
4.3.3 article 79
4.3.4 aside 79
4.3.5 hgroup 79
4.3.6 header 81
4.3.7 footer 81
4.3.8 address 81
4.4 HTML5结构元素的实际用法 81
4.5 HTML5的文本级语义元素 87
4.5.1 b 88
4.5.2 em 88
4.5.3 i 88
4.5.4 在页面中应用文本层语义元素 88
4.6 遵循WAI-ARIA实现无障碍站点 90
4.7 在HTML5中嵌入媒体 93
4.8 用HTML5的方法为页面添加视频或音频 93
4.8.1 提供备用的媒体源文件 95
4.8.2 针对老版本浏览器的备用方案 95
4.8.3 和标签的用法基本一致 96
4.9 响应式视频 96
4.10 离线Web应用 99
4.10.1 离线Web应用概述 99
4.10.2 让网页可离线使用 99
4.10.3 理解manifest文件 100
4.10.4 页面被自动加载到离线缓存 101
4.10.5 版本注释的用途 101
4.10.6 离线访问网站 101
4.10.7 离线Web应用的故障诊断 102
4.11 小结 103
第5章 CSS3:选择器、字体和颜色模式 104
5.1 CSS3给前端开发人员带来了什么 104
5.1.1 Internet Explorer 6到8对CSS3的支持 105
5.1.2 使用CSS3设计和开发页面 105
5.2 CSS规则解析 105
5.3 私有前缀及其用法 106
5.4 快速而有效的CSS技巧 108
5.4.1 CSS3多栏布局 108
5.4.2 文字换行 110
5.5 CSS3的新增选择器及其用法 111
5.5.1 CSS3属性选择器 111
5.5.2 CSS3结构伪类 113
5.5.3 对伪元素的修正 122
5.6 自定义网页字体 123
5.6.1 @font-face规则 124
5.6.2 使用@font-face嵌入网页字体 124
5.7 帮帮我,标题模糊怎么办 127
5.8 新的CSS3颜色格式和透明度 129
5.8.1 RGB颜色 130
5.8.2 HSL颜色 131
5.8.3 针对IE6、IE7和IE8提供备用颜色值 132
5.8.4 透明通道 132
5.9 小结 134
第6章 用CSS3创造令人惊艳的美 135
6.1 文字阴影 136
6.1.1 HEX、HSL或RGB颜色都可以 136
6.1.2 px、em或rem都行 136
6.1.3 取消文字阴影 138
6.1.4 制作浮雕文字阴影效果 139
6.1.5 多重文字阴影 140
6.2 盒阴影 140
6.2.1 内阴影 141
6.2.2 多重阴影 142
6.3 背景渐变 143
6.3.1 线性背景渐变 144
6.3.2 径向背景渐变 147
6.3.3 重复渐变 149
6.4 背景渐变图案 151
6.5 CSS3的响应性 153
6.6 组合使用CSS3属性 155
6.7 多重背景图片 159
6.7.1 背景图片大小 161
6.7.2 背景图片位置 161
6.7.3 背景属性的缩写语法 161
6.8 更多CSS特性 162
6.9 可缩放图标:响应式设计中的完美选择 162
6.10 小结 163
第7章 CSS3过渡、变形和动画 164
7.1 什么是CSS3过渡以及如何使用它 164
7.1.1 过渡相关的属性 166
7.1.2 响应式网站中的有趣过渡 168
7.2 CSS3的2D变形 169
7.3 尝试CSS3的3D变形 174
7.3.1 分析3D变形效果 176
7.3.2 3D变形尚未成熟 178
7.4 CSS3动画效果 179
7.5 小结 185
第8章 用HTML5和CSS3征服表单 186
8.1 HTML5表单 186
8.1.1 理解HTML5表单中的元素 188
8.1.2 placeholder 189
8.1.3 required 189
8.1.4 autofocus 190
8.1.5 autocomplete 191
8.1.6 list(及对应的datalist元素) 191
8.1.7 HTML5的新输入类型 192
8.1.8 日期和时间输入类型 198
8.2 如何给不支持新特性的浏览器打补丁 203
8.3 使用CSS3美化HTML5表单 204
8.4 小结 210
第9章 解决跨浏览器问题 211
9.1 渐进增强与优雅降级 215
9.2 该不该修复老版本IE 216
9.2.1 统计数据(再看看世界的变化) 216
9.2.2 个人选择 216
9.3 前端的瑞士军刀:Modernizr 217
9.3.1 使用Modernizr辅助修正样式问题 219
9.3.2 使用Modernizr让老版本IE支持HTML5元素 221
9.3.3 给IE6、7、8追加min/max媒体查询功能 222
9.3.4 使用Modernizr按需加载资源 223
9.4 必要时将导航链接转换为下拉菜单 225
9.5 高分辨率设备(未来趋势) 228
9.6 小结 231
· · · · · · ()

蒂姆•伯纳斯李在1991年制作并发布了第一个网站,如今刚刚过去21个年头。在这21年里,计算机和互联网快速发展,这个世界的面貌也日新月异。在这个过程中,网页设计从无到有,从简单渐至专业,从可有可无变为广受关注。网页设计方法也在跟随时代不断创新,从最初简单的文字排版,到表格布局,再到DIV+CSS,直到现在广为流行的网格布局、流式布局等,设计师和开发者们一直致力于为全..


, 这套丛书还有 《PHP编程实战》,《HTML5和CSS3实例教程》,《Node Web开发》,《JavaScript基础教程》,《HTML5权威指南》 等。
Ben Frain写得真好!第2、3章把响应式Web的核心:媒体查询、流式布局讲得好清楚呀。 第9章的几招完全可以copy有木有! = so cool。 翻译不错。


什么是话题 无论是一部作品、一个人,还是一件事,都往往可以衍生出许多不同的话题。将这些话题细分出来,分别进行讨论,会有更多收获。
前半部分讲解responsive design,后面都是一些对html5、css3功能的罗列,没总结学习过的同学可以读一下,实际5~8章是可以略过,直接跳到最后一章吧。 另外我还是更推荐这本书《Implementing Responsive Design》  ()
偶然的机会,你要开次夜车(注意,不是“开夜车” [汗]),横穿十里长安街。凌晨三点,你的车距离长安街500米。整条街空空荡荡的,像是刚刚散场人去楼空的电影院,一辆车也没有,路灯昏暗不明。很快,你的车还有100米就要上长安街了。此时,前方路口左右两侧的4盏灯突然变亮了...  ()
1、从豆瓣中查找,目前市场上关于响应式web设计的书籍仅此两枚,在工作和个人喜好的共同作用下,毫不犹豫的逐一收入囊中; 2、书名中可以看出书中的主要内容是关于HTML5和CSS3在响应式web设计中的应用,而感觉最终记忆中最深刻的要数HTML5和CSS3在现代网页制作过程中的应用了(...  ()
首先废话几句我是怎么买到以及阅读这本书的。 1、这本书很久之前就已经在我的豆瓣读书里了。原价49,双十一卖19,于是买。 2、几天后到手,用了3天时间(业余时间)读完,在此之前有3年前端开发经验,对于HTML+CSS不敢说技术高深但也驾轻就熟。 然后说说这本书到底讲了什么。...  ()
百分之四十讲得响应式设计,其他部分就没必要了吧。 html5+css3还讲啥啊,故意浪费纸张。 我只对响应式的百分比布局和em布局感兴趣,其他三页纸就讲得很清楚了,出版社明显是凑字数么,定价还49,坑爹没底限啊。  ()
偶然的机会,你要开次夜车(注意,不是“开夜车” [汗]),横穿十里长安街。凌晨三点,你的车距离长安街500米。整条街空空荡荡的,像是刚刚散场人去楼空的电影院,一辆车也没有,路灯昏暗不明。很快,你的车还有100米就要上长安街了。此时,前方路口左右两侧的4盏灯突然变亮了...  ()
随着iPad mini的发布,又一个新的屏幕尺寸诞生了。用不着全面统计,你就会发现移动互联网时代众多的屏幕规格,从智能手机的3、4、5英寸,到平板电脑的7、8、9、10英寸,再到笔记本和台式机的13至30英寸,绝非目前单一的固定或流式布局所能应付的。于是,响应式设计应运而生,而...  ()
我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看过了 我看...  ()
HTML5模板 Boilerplate(http://html5boilerplate.com/ )。这个模板预置了HTML5“最佳实践”,包括基础的样式、腻子脚本和可选的工具,比如Modernizr。 文档的主内容指的是文档中特有的内容,导航链接、版权信息、站点标志、广告和搜索表单 等多个文档中重复出现的内容不算主内容(除非网页或文档的主要内容就是搜索表单)。 每个页面的主内容区只能有一个(两个主内容就没有主内容了),而且不能作为 article、aside、header、...


HTML5模板 Boilerplate( )。这个模板预置了HTML5“最佳实践”,包括基础的样式、腻子脚本和可选的工具,比如Modernizr。

文档的主内容指的是文档中特有的内容,导航链接、版权信息、站点标志、广告和搜索表单 等多个文档中重复出现的内容不算主内容(除非网页或文档的主要内容就是搜索表单)。

每个页面的主内容区只能有一个(两个主内容就没有主内容了),而且不能作为 article、aside、header、footer、nav 或 header 等其他HTML5语义元素的后代。上述这些元素倒是可以放到 main 元素中。

section 元素用于定义文档或应用中一个通用的区块。

如果使用无序列表( ul )和列表标签( li )来写导航,那最好改成用 nav 嵌套多个 a 标签。

W3C HTML5规范对 nav 元素的具体规定:

figure 建议用于包含注解、图示、照片、代码,等等。如果图片或代码需要一个小标题(放在正文不太合适),那么用 figure 。

figure >

details summary I ate 15 scones in one day /summary p Of course I didn t. It would probably kill me if I did. What a way to go. Mmmmmm, scones! /p /details

要禁用summary样式,可以使用针对Webkit的伪选择符: summary::-webkit-details-marker { display: none; }

“em 元素表示内容中需要强调的部分。” 所以不强调时使用 b 标签,或者在合适的情况下,选 i 。

WCAG简明参考指南( )

如果无法给 button 设置样式(比如 display: table-cell 或 display: flex),至少应该选择更接近的方案,比如 a 标签。

谷歌的Chrome浏览器“Accessibility Developer Tools”可跨平台调试前端代码

video src= myVideo.mp4 width= 640 height= 480 controls autoplay preload= auto loop poster= myVideoPoster.png What, do you mean you don t understand HTML5? /video

controls autoplay preload= auto 是说默认播放视频

视频窗口的大小设置:video { max-width: 100%; height: auto; }

关于视频播放,参见

在线转换连接工具:

HTML5离线Web应用编写指南:

关于应用缓存的一些设置:

一个很好的h5教程及参考网站:

service worker 是一段运行在浏览器后台进程里的脚本,它独立于当前页面,提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。教程可以参见:

设置主页面内容的列数:main { column-count: 4; }

1. 固定列数,可变宽度

以给列间添加间距和分隔线: main { column-gap: 2em; column-rule: thin dotted #999; column-width: 12em; }

断字 :word-wrap: break-word;

p >

截短文本

.truncate { width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: no-wrap; }

创建水平滚动面板

.Scroll_Wrapper { width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; } .Item { display: inline-flex; }

为了保证::before 和::after 显示,它们必须包含一个 content 值,就算空白也行。显示

.Scroll_Wrapper { width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; /* 在WebKiet的触摸设备上出现 */ -webkit-overflow-scrolling: touch; /* 在支持的IE中删除滚动条 */ -ms-overflow-style: none; } /* 防止WebKit浏览器中出现滚动条 */ .Scroll_Wrapper::-webkit-scrollbar { display: none; }

在浏览器支持的情况下使用Flexbox,在不支持的情况下回退到另一种布局方案。比如:

@supports (display: flex) { .Item { display: inline-flex; } } @supports not (display: flex) { .Item { display: inline-block; } }

如果不支持@supports ,这两块代码都不会被应用。

在@supports 得到广泛支持以前,可以使用Modernizr这个JavaScript工具。目前,它是在CSS中实现分支的最可靠方式。


script src="https://img9.doubanio.com/js/libs/modernizr-2.8.3-custom.min.js" /script modernizr是一款检测css和h5属性的脚本,为适应兼容性而生。 []是属性选择符,比如以下规则: img[alt] { border: 3px dashed #e15f5f; } ^表示选择“以……开头”的选择符: img[alt^="film"] { /* 样式 */ } *表示“包含……”的选择符: [attribute*="value"] { /* 样式 */ } $表示“以……结尾”的选择符: [attribute$="value"] { /* 样式 *...


script src= /js/libs/modernizr-2.8.3-custom.min.js /script

modernizr是一款检测css和h5属性的脚本,为适应兼容性而生。

[]是属性选择符,比如以下规则: img[alt] { border: 3px dashed #e15f5f; }

^表示选择“以……开头”的选择符: img[alt^= film ] { /* 样式 */ }

*表示“包含……”的选择符: [attribute*= value ] { /* 样式 */ }

$表示“以……结尾”的选择符: [attribute$= value ] { /* 样式 */ }

~表示可以使用“空格分隔的”属性选择符(注意 ~ 符号),IE7都支持: [data-film~= film ] { color: red; }

可以选择第一项的选择符div:first-child { /* 样式 */ }

可以选择最后一项的选择符(css3开始支持): div:last-child { /* 样式 */ }

选择奇数个:.nav-Link:nth-child(odd) { /* 样式 */ }

选择偶数个: .nav-Link:nth-child(even) { /* 样式 */ }

CSS3提供了以下几个基于 nth 的规则: nth-child(n) nth-last-child(n) nth-of-type(n) nth-last-of-type(n)

@media (min-width: 55rem) { .Item { width: 25%; }

/* 每4个选1个,但仅限于最后4项 */

.Item:nth-child(4n+1):nth-last-child(-n+4),

/* 取得该集合后面的每一项 */

.Item:nth-child(4n+1):nth-last-child(-n+4) ~ .Item { border-bottom: 0; } }

.a-div:not(.not-me) { background-color: orange; border-radius: 50%; }

p:first-letter容易与伪元素混淆,CSS3要求把这种伪元素与伪类区分开。因此,现在应该写 p::first-letter。


IE9及以下版本不支持Flexbox。 .flex { display: flex; flex: 1; justify-content: space-between; } 要想支持安卓浏览器(v4及以下版本操作系统)和IE10,最终代码得这样写: .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: j...


IE9及以下版本不支持Flexbox。

.flex { display: flex; flex: 1; justify-content: space-between; }

要想支持安卓浏览器(v4及以下版本操作系统)和IE10,最终代码得这样写: .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }

-ms-是Microsoft,-webkit-是 WebKit,-moz-是Mozilla。

这是让Flexbox跨浏览器的唯一有效方式。

自动生成跨浏览器的兼容性CSS代码工具Autoprefixer( )。这是一个很快、准确而且安装简便的PostCSS插件。

垂直居中文本的CSS规则如下: .CenterMe { background-color: indigo; color: #ebebeb; font-family: Oswald , sans-serif; font-size: 2rem; text-transform: uppercase; height: 200px; display: flex; align-items: center; justify-content: center; }

div >

flex-direction: row-reverse,把最后一项的 margin-left: auto 改成 margin-right: auto

如果将某元素无端地设置为 display: inline-flex(比如包含该元素的元素没有被设置为 display: flex),那么这个元素就会像 inline-block 和 inline-table 一样保留元素间的空白。如果这个元素处于一个Flexbox中,空白就会消失,就跟 table 中的 table-cell 一样。

.InlineFlex { display: inline-flex; align-items: center; height: 120px; padding: 0 4px; background-color: indigo; text-decoration: none; border-radius: 3px; color: #ddd; }

使用 align-self 属性决定自己的对齐方式。

Flexbox为交叉轴对齐提供了以下值。 flex-start:把元素的对齐设置为 flex-start,可以让元素从Flexbox父元素的起始边开始。 flex-end:把元素的对齐设置为 flex-end,会 沿Flexbox父元素的末尾对齐该元素。 center:把元素放在Flexbox元素的中间。 baseline:让Flexbox元素中的所有项沿基线对齐。 stretch:让Flexbox中的所有项(没交叉轴)拉伸至与父元素一样大。

.FlexInner { border: 1px solid #ebebeb; background-color: #34005B; display: flex; height: 100px; flex: 1; } 这里的 flex 实际上是三个属性合体的简写:flex-grow、flex-shrink 和 flex-basis。关于这三个属性的详细介绍,可以参考规范原文:

对于伸缩项,如果 flex 属性存在(且浏览器支持),则使用它的值控制元素的大小,忽略宽度和高度值的设置, 即使它们的声明位于 flex 声明之后,也会被忽略。

flex-grow(传给 flex 的第一个值)是相对于其他伸缩项,当前伸缩项在空间允许的情况下可以伸展的量。 flex-shrink 是在空间不够的情况下,当前伸缩项相对于其他伸缩项可以收缩的量。 flex-basis(传给 flex 的最后一个值)是伸缩项伸缩的基准值。

简单的粘附页脚

body div >

html, body { margin: 0; padding: 0; } html { height: 100%; } body { font-family: Oswald , sans-serif; color: #ebebeb; display: flex; flex-direction: column; min-height: 100%; } .MainContent { flex: 1; color: #333; padding: .5rem; } .Footer { background-color: violet; padding: .5rem; }

@media (min-width: 30rem) { .FlexWrapper { flex-flow: row wrap; } .FlexHeader { width: 100%; } .FlexContent { flex: 1; order: 3; } .FlexSideOne { width: 150px; order: 2; } .FlexSideTwo { width: 150px; order: 4; } .FlexFooter { width: 100%; } }

此视要向后兼容的力度,可能需要把内容和两个侧边栏封装在另一个元素中。

最新版本:

Grid Layout Module Level 1:

让浏览器知道图片的三个版本: img src= scones_small.jpg srcset= scones_medium.jpg 1.5x, scones_ large.jpg 2x alt= Scones taste amazing

img srcset= scones-small.jpg 450w, scones-medium.jpg 900w sizes= (min-width: 17em) 100vw, (min-width: 40em) 50vw src= sconessmall. jpg alt= Scones

CSS中如何定义像素:

picture source media= (min-width: 30em) srcset= cake-table.jpg source media= (min-width: 60em) srcset= cake-shop.jpg img src= scones.jpg alt= One way or another, you WILL get cake. /picture

这里的 img 标签是浏览器不支持 picture 元素,或者支持 picture 但没有合适媒体定义时的后备。


所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。 建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。 在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: http://caniuse.com 。这个网站的界面简洁,查询方便。 本书示例代码的地址是: http://rwd.education/download.zip 或 https://github.com/benfrain/rwd 浏览器中用于呈现网页的区域叫 视口(viewport)。视口通常并不等...


所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。

在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: 。这个网站的界面简洁,查询方便。

本书示例代码的地址是: 或

浏览器中用于呈现网页的区域叫 视口(viewport)。视口通常并不等于屏幕大小,特别是可以缩放浏览器窗口的情况下。

meta name= viewport content= width=device-width 这个视口的 meta 标签是一种非标准的(但却是事实标准的)方式,它告诉浏览器怎么渲染网页。在这里, meta 标签想表达的意思是:按照设备的宽度(device-width)来渲染 网页内容。

要实现图片的自动缩放,也可以使用更通用的 width 属性,比如 width:100%。然而,这条规则在这里的效果不同。如果给 width 属性设置一个值,那么图片就会按照该值显示,不考虑自身固有宽度。

max-width: 100%;

所谓“断点”,就是某个宽度临界点,跨过这个点布局就会发生 显著变化。

实际的最小宽度可以使用不同的长度单位指定,比如百分比、em、rem和px。在CSS中,最小宽度媒体查询是这样写的: @media screen and (min-width: 50em) { /* 样式 */ }

基本上所有浏览器默认的文本大小都是16像素,因此用像素值除以16就可以得到rem值。

@media screen and (min-width: 50rem) { .IntroWrapper { display: table; table-layout: fixed; width: 100%; } .MoneyShot, .IntroText { display: table-cell; width: 50%; vertical-align: middle; text-align: center; } .IntroText { padding: .5rem; font-size: 2.5rem; text-align: left; } .Ingredients { font-size: .9rem; float: right; padding: 1rem; margin: 0 0 .5rem 1rem; border-radius: 3px; background-color: #ffffdf; border: 2px solid #e8cfa9; } .Ingredients h3 { margin: 0; } }

用SVG(Scalable Vector Graphics,可伸缩矢量图)可以简单地适用各种分辨率。

link rel= stylesheet media= screen and (orientation: portrait) href= portrait-screen.css /

导入样式表phone.css,条件是必须是屏幕设备,而且视口不超过360像素: @import url( phone.css ) screen and (max-width:360px);

使用CSS中的@import 会增加HTTP请求(进而影响加载速度)。

width:视口宽度。 height:视口高度。 device-width:渲染表面的宽度(可以认为是设备屏幕的宽度)。 device-height:渲染表面的高度(可以认为是设备屏幕的高度)。 orientation:设备方向是水平还是垂直。 aspect-ratio:视口的宽高比。16∶9的宽屏显示器可以写成 aspect-ratio:16/9。 color:颜色组分的位深。比如 min-color:16 表示设备至少支持16位深。 color-index:设备颜色查找表中的条目数,值必须是数值,且不能为负。 monochrome:单色帧缓冲中表示每个像素的位数,值必须是数值(整数),比如monochrome: 2,且不能为负。 resolution:屏幕或打印分辨率,比如 min-resolution: 300dpi。也可以接受每厘米多少点,比如 min-resolution: 118dpcm。 scan:针对电视的逐行扫描(progressive)和隔行扫描(interlace)。例如720p HD TV(720p中的p表示progressive,即逐行)可以使用 scan: progressive 来判断; 而1080i HD TV(1080i中的i表示interlace,即隔行)可以使用 scan: interlace 来判断。 grid:设备基于栅格还是位图。 上面列表中的特性,除 scan 和 grid 外,都可以加上 min 或 max 前缀以指定范围。看看下面的代码: @import url( tiny.css ) screen and (min-width:200px) and (maxwidth: 360px);

从原理上讲,位于下方的CSS样式会覆盖位于上方的目标相同的CSS样式,除非上方的选择符优先级更高或者更具体。

example_02-02展示了导航栏的生成方式

a href= # >

媒体查询的一个常见的使用场景,就是针对高分辨率设备编写特殊样式。比如: @media (min-resolution: 2dppx) { /* 样式 */ }

减小dppx值,可以扩大这个媒体查询的适用范围。

「阻塞渲染」仅是指该资源是否会暂停浏览器的首次页面渲染。无论CSS是否阻塞渲染,CSS资源都会被下载,只是说非阻塞性资源的优先级比较低而已。

多一个文件就要多一次HTTP请求,在某些条件下,HTTP请求多了会明显影响页面加载速度。

所有资源都采用了gzip压缩; 所有静态内容都缓存到了CDN; 所有多余的CSS规则都被清除了。

设置以内容实际大小的两倍(百分之二百)显示: meta name= viewport content= initial-scale=2.0,width =device-width /

允许用户最大将页面放大到设备宽度的三倍,最小可以将页面缩小至设备宽度的一半。 meta name= viewport content= width=device-width, maximum-scale=3, minimum-scale=0.5 / 甚至可以完全禁止用户缩放。禁止用户缩放 meta name= viewport content= initial-scale=1.0, user-scalable=no /

在CSS中写@viewport { width:320px; }。这同样可以将浏览器宽度设置为320像素。目前还没有多少浏览器支持这个CSS特性。考虑到面向未来,可以同时使用 meta 标签和@viewport 声明。

只针对支持JavaScript的浏览器编写相应的样式了。比如:.js .header { display: block; }。

@media (scripting: none) { /* 没有JavaScript时的样式 */ }

@media (scripting: enabled) { /* 有JavaScript时的样式 */ }

@media (scripting: initial-only) { /* JavaScript只在一开始有效的样式 */ }

“指针媒体特性用于查询鼠标之类的指针设备是否存在,以及存在时其精确的位置。

coarse 指针设备代表触摸屏设备中的手指。不过,这个值也可以是游戏机中的指针等不像鼠标那样能够提供精确控制的机制。 @media (pointer: coarse) { /* 针对coarse指针的样式 */ }

fine 指针设备可能是鼠标,也可能是手写笔或其他未来可能出现的精确指针设备

最保险的做法是假设用户在使用触摸屏设备,并相应地把界面元素调大。这样,即使用户使用的是鼠标,也不会影响体验。

@media (hover: on-demand) { /* 针对可通过启用程序实现悬停用户的样式 */ }

@media (hover) { /* 针对可悬停用户的样式 */ } 另外,还有 any-pointer 和 any-hover 媒体特性。这两个特性与前面的 pointer 和 hover 类似,只不过测试的不光是主输入机制,而是任意可能的输入设备。

我们可以在昏暗环境里减小所用颜色的亮度值。或者在光线充足的环境里提高亮度。环境媒体属性就是为解决这个问题而生的。 @media (light-level: normal) { /* 针对标准亮度的样式 */ } @media (light-level: dim) { /* 针对暗光线条件的样式 */ } @media (light-level: washed) { /* 针对强光线条件的样式 */ }

.Right { height: 625px; width: 10.4166667%; background-color: #03A66A; display: inline-block;

使用行内块(inline-block)来布局的最大问题,就是它会在HTML元素间渲染空白。

.WrapMiddle { width: 100%; font-size: 0; }

去掉留白。像前面的例子中使用大小为零的 font-size

关于如何去掉使用行内块时产生的空白: 。

要想完美地垂直居中,表元必须被包在一个表格元素中。


所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。 建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。 在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: http://caniuse.com 。这个网站的界面简洁,查询方便。 本书示例代码的地址是: http://rwd.education/download.zip 或 https://github.com/benfrain/rwd 浏览器中用于呈现网页的区域叫 视口(viewport)。视口通常并不等...


所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。

在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: 。这个网站的界面简洁,查询方便。

本书示例代码的地址是: 或

浏览器中用于呈现网页的区域叫 视口(viewport)。视口通常并不等于屏幕大小,特别是可以缩放浏览器窗口的情况下。

meta name= viewport content= width=device-width 这个视口的 meta 标签是一种非标准的(但却是事实标准的)方式,它告诉浏览器怎么渲染网页。在这里, meta 标签想表达的意思是:按照设备的宽度(device-width)来渲染 网页内容。

要实现图片的自动缩放,也可以使用更通用的 width 属性,比如 width:100%。然而,这条规则在这里的效果不同。如果给 width 属性设置一个值,那么图片就会按照该值显示,不考虑自身固有宽度。

max-width: 100%;

所谓“断点”,就是某个宽度临界点,跨过这个点布局就会发生 显著变化。

实际的最小宽度可以使用不同的长度单位指定,比如百分比、em、rem和px。在CSS中,最小宽度媒体查询是这样写的: @media screen and (min-width: 50em) { /* 样式 */ }

基本上所有浏览器默认的文本大小都是16像素,因此用像素值除以16就可以得到rem值。

@media screen and (min-width: 50rem) { .IntroWrapper { display: table; table-layout: fixed; width: 100%; } .MoneyShot, .IntroText { display: table-cell; width: 50%; vertical-align: middle; text-align: center; } .IntroText { padding: .5rem; font-size: 2.5rem; text-align: left; } .Ingredients { font-size: .9rem; float: right; padding: 1rem; margin: 0 0 .5rem 1rem; border-radius: 3px; background-color: #ffffdf; border: 2px solid #e8cfa9; } .Ingredients h3 { margin: 0; } }

用SVG(Scalable Vector Graphics,可伸缩矢量图)可以简单地适用各种分辨率。

link rel= stylesheet media= screen and (orientation: portrait) href= portrait-screen.css /

导入样式表phone.css,条件是必须是屏幕设备,而且视口不超过360像素: @import url( phone.css ) screen and (max-width:360px);

使用CSS中的@import 会增加HTTP请求(进而影响加载速度)。

width:视口宽度。 height:视口高度。 device-width:渲染表面的宽度(可以认为是设备屏幕的宽度)。 device-height:渲染表面的高度(可以认为是设备屏幕的高度)。 orientation:设备方向是水平还是垂直。 aspect-ratio:视口的宽高比。16∶9的宽屏显示器可以写成 aspect-ratio:16/9。 color:颜色组分的位深。比如 min-color:16 表示设备至少支持16位深。 color-index:设备颜色查找表中的条目数,值必须是数值,且不能为负。 monochrome:单色帧缓冲中表示每个像素的位数,值必须是数值(整数),比如monochrome: 2,且不能为负。 resolution:屏幕或打印分辨率,比如 min-resolution: 300dpi。也可以接受每厘米多少点,比如 min-resolution: 118dpcm。 scan:针对电视的逐行扫描(progressive)和隔行扫描(interlace)。例如720p HD TV(720p中的p表示progressive,即逐行)可以使用 scan: progressive 来判断; 而1080i HD TV(1080i中的i表示interlace,即隔行)可以使用 scan: interlace 来判断。 grid:设备基于栅格还是位图。 上面列表中的特性,除 scan 和 grid 外,都可以加上 min 或 max 前缀以指定范围。看看下面的代码: @import url( tiny.css ) screen and (min-width:200px) and (maxwidth: 360px);

从原理上讲,位于下方的CSS样式会覆盖位于上方的目标相同的CSS样式,除非上方的选择符优先级更高或者更具体。

example_02-02展示了导航栏的生成方式

a href= # >

媒体查询的一个常见的使用场景,就是针对高分辨率设备编写特殊样式。比如: @media (min-resolution: 2dppx) { /* 样式 */ }

减小dppx值,可以扩大这个媒体查询的适用范围。

「阻塞渲染」仅是指该资源是否会暂停浏览器的首次页面渲染。无论CSS是否阻塞渲染,CSS资源都会被下载,只是说非阻塞性资源的优先级比较低而已。

多一个文件就要多一次HTTP请求,在某些条件下,HTTP请求多了会明显影响页面加载速度。

所有资源都采用了gzip压缩; 所有静态内容都缓存到了CDN; 所有多余的CSS规则都被清除了。

设置以内容实际大小的两倍(百分之二百)显示: meta name= viewport content= initial-scale=2.0,width =device-width /

允许用户最大将页面放大到设备宽度的三倍,最小可以将页面缩小至设备宽度的一半。 meta name= viewport content= width=device-width, maximum-scale=3, minimum-scale=0.5 / 甚至可以完全禁止用户缩放。禁止用户缩放 meta name= viewport content= initial-scale=1.0, user-scalable=no /

在CSS中写@viewport { width:320px; }。这同样可以将浏览器宽度设置为320像素。目前还没有多少浏览器支持这个CSS特性。考虑到面向未来,可以同时使用 meta 标签和@viewport 声明。

只针对支持JavaScript的浏览器编写相应的样式了。比如:.js .header { display: block; }。

@media (scripting: none) { /* 没有JavaScript时的样式 */ }

@media (scripting: enabled) { /* 有JavaScript时的样式 */ }

@media (scripting: initial-only) { /* JavaScript只在一开始有效的样式 */ }

“指针媒体特性用于查询鼠标之类的指针设备是否存在,以及存在时其精确的位置。

coarse 指针设备代表触摸屏设备中的手指。不过,这个值也可以是游戏机中的指针等不像鼠标那样能够提供精确控制的机制。 @media (pointer: coarse) { /* 针对coarse指针的样式 */ }

fine 指针设备可能是鼠标,也可能是手写笔或其他未来可能出现的精确指针设备

最保险的做法是假设用户在使用触摸屏设备,并相应地把界面元素调大。这样,即使用户使用的是鼠标,也不会影响体验。

@media (hover: on-demand) { /* 针对可通过启用程序实现悬停用户的样式 */ }

@media (hover) { /* 针对可悬停用户的样式 */ } 另外,还有 any-pointer 和 any-hover 媒体特性。这两个特性与前面的 pointer 和 hover 类似,只不过测试的不光是主输入机制,而是任意可能的输入设备。

我们可以在昏暗环境里减小所用颜色的亮度值。或者在光线充足的环境里提高亮度。环境媒体属性就是为解决这个问题而生的。 @media (light-level: normal) { /* 针对标准亮度的样式 */ } @media (light-level: dim) { /* 针对暗光线条件的样式 */ } @media (light-level: washed) { /* 针对强光线条件的样式 */ }

.Right { height: 625px; width: 10.4166667%; background-color: #03A66A; display: inline-block;

使用行内块(inline-block)来布局的最大问题,就是它会在HTML元素间渲染空白。

.WrapMiddle { width: 100%; font-size: 0; }

去掉留白。像前面的例子中使用大小为零的 font-size

关于如何去掉使用行内块时产生的空白: 。

要想完美地垂直居中,表元必须被包在一个表格元素中。


IE9及以下版本不支持Flexbox。 .flex { display: flex; flex: 1; justify-content: space-between; } 要想支持安卓浏览器(v4及以下版本操作系统)和IE10,最终代码得这样写: .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: j...


IE9及以下版本不支持Flexbox。

.flex { display: flex; flex: 1; justify-content: space-between; }

要想支持安卓浏览器(v4及以下版本操作系统)和IE10,最终代码得这样写: .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }

-ms-是Microsoft,-webkit-是 WebKit,-moz-是Mozilla。

这是让Flexbox跨浏览器的唯一有效方式。

自动生成跨浏览器的兼容性CSS代码工具Autoprefixer( )。这是一个很快、准确而且安装简便的PostCSS插件。

垂直居中文本的CSS规则如下: .CenterMe { background-color: indigo; color: #ebebeb; font-family: Oswald , sans-serif; font-size: 2rem; text-transform: uppercase; height: 200px; display: flex; align-items: center; justify-content: center; }

div >

flex-direction: row-reverse,把最后一项的 margin-left: auto 改成 margin-right: auto

如果将某元素无端地设置为 display: inline-flex(比如包含该元素的元素没有被设置为 display: flex),那么这个元素就会像 inline-block 和 inline-table 一样保留元素间的空白。如果这个元素处于一个Flexbox中,空白就会消失,就跟 table 中的 table-cell 一样。

.InlineFlex { display: inline-flex; align-items: center; height: 120px; padding: 0 4px; background-color: indigo; text-decoration: none; border-radius: 3px; color: #ddd; }

使用 align-self 属性决定自己的对齐方式。

Flexbox为交叉轴对齐提供了以下值。 flex-start:把元素的对齐设置为 flex-start,可以让元素从Flexbox父元素的起始边开始。 flex-end:把元素的对齐设置为 flex-end,会 沿Flexbox父元素的末尾对齐该元素。 center:把元素放在Flexbox元素的中间。 baseline:让Flexbox元素中的所有项沿基线对齐。 stretch:让Flexbox中的所有项(没交叉轴)拉伸至与父元素一样大。

.FlexInner { border: 1px solid #ebebeb; background-color: #34005B; display: flex; height: 100px; flex: 1; } 这里的 flex 实际上是三个属性合体的简写:flex-grow、flex-shrink 和 flex-basis。关于这三个属性的详细介绍,可以参考规范原文:

对于伸缩项,如果 flex 属性存在(且浏览器支持),则使用它的值控制元素的大小,忽略宽度和高度值的设置, 即使它们的声明位于 flex 声明之后,也会被忽略。

flex-grow(传给 flex 的第一个值)是相对于其他伸缩项,当前伸缩项在空间允许的情况下可以伸展的量。 flex-shrink 是在空间不够的情况下,当前伸缩项相对于其他伸缩项可以收缩的量。 flex-basis(传给 flex 的最后一个值)是伸缩项伸缩的基准值。

简单的粘附页脚

body div >

html, body { margin: 0; padding: 0; } html { height: 100%; } body { font-family: Oswald , sans-serif; color: #ebebeb; display: flex; flex-direction: column; min-height: 100%; } .MainContent { flex: 1; color: #333; padding: .5rem; } .Footer { background-color: violet; padding: .5rem; }

@media (min-width: 30rem) { .FlexWrapper { flex-flow: row wrap; } .FlexHeader { width: 100%; } .FlexContent { flex: 1; order: 3; } .FlexSideOne { width: 150px; order: 2; } .FlexSideTwo { width: 150px; order: 4; } .FlexFooter { width: 100%; } }

此视要向后兼容的力度,可能需要把内容和两个侧边栏封装在另一个元素中。

最新版本:

Grid Layout Module Level 1:

让浏览器知道图片的三个版本: img src= scones_small.jpg srcset= scones_medium.jpg 1.5x, scones_ large.jpg 2x alt= Scones taste amazing

img srcset= scones-small.jpg 450w, scones-medium.jpg 900w sizes= (min-width: 17em) 100vw, (min-width: 40em) 50vw src= sconessmall. jpg alt= Scones

CSS中如何定义像素:

picture source media= (min-width: 30em) srcset= cake-table.jpg source media= (min-width: 60em) srcset= cake-shop.jpg img src= scones.jpg alt= One way or another, you WILL get cake. /picture

这里的 img 标签是浏览器不支持 picture 元素,或者支持 picture 但没有合适媒体定义时的后备。


如果要用一句话概括响应式网页设计,我觉得它是针对任意设备对网页 内容进行完美布局的一种显示机制。


如果要用一句话概括响应式网页设计,我觉得它是针对任意设备对网页 内容进行完美布局的一种显示机制。


script src="https://img9.doubanio.com/js/libs/modernizr-2.8.3-custom.min.js" /script modernizr是一款检测css和h5属性的脚本,为适应兼容性而生。 []是属性选择符,比如以下规则: img[alt] { border: 3px dashed #e15f5f; } ^表示选择“以……开头”的选择符: img[alt^="film"] { /* 样式 */ } *表示“包含……”的选择符: [attribute*="value"] { /* 样式 */ } $表示“以……结尾”的选择符: [attribute$="value"] { /* 样式 *...


script src= /js/libs/modernizr-2.8.3-custom.min.js /script

modernizr是一款检测css和h5属性的脚本,为适应兼容性而生。

[]是属性选择符,比如以下规则: img[alt] { border: 3px dashed #e15f5f; }

^表示选择“以……开头”的选择符: img[alt^= film ] { /* 样式 */ }

*表示“包含……”的选择符: [attribute*= value ] { /* 样式 */ }

$表示“以……结尾”的选择符: [attribute$= value ] { /* 样式 */ }

~表示可以使用“空格分隔的”属性选择符(注意 ~ 符号),IE7都支持: [data-film~= film ] { color: red; }

可以选择第一项的选择符div:first-child { /* 样式 */ }

可以选择最后一项的选择符(css3开始支持): div:last-child { /* 样式 */ }

选择奇数个:.nav-Link:nth-child(odd) { /* 样式 */ }

选择偶数个: .nav-Link:nth-child(even) { /* 样式 */ }

CSS3提供了以下几个基于 nth 的规则: nth-child(n) nth-last-child(n) nth-of-type(n) nth-last-of-type(n)

@media (min-width: 55rem) { .Item { width: 25%; }

/* 每4个选1个,但仅限于最后4项 */

.Item:nth-child(4n+1):nth-last-child(-n+4),

/* 取得该集合后面的每一项 */

.Item:nth-child(4n+1):nth-last-child(-n+4) ~ .Item { border-bottom: 0; } }

.a-div:not(.not-me) { background-color: orange; border-radius: 50%; }

p:first-letter容易与伪元素混淆,CSS3要求把这种伪元素与伪类区分开。因此,现在应该写 p::first-letter。


HTML5模板 Boilerplate(http://html5boilerplate.com/ )。这个模板预置了HTML5“最佳实践”,包括基础的样式、腻子脚本和可选的工具,比如Modernizr。 文档的主内容指的是文档中特有的内容,导航链接、版权信息、站点标志、广告和搜索表单 等多个文档中重复出现的内容不算主内容(除非网页或文档的主要内容就是搜索表单)。 每个页面的主内容区只能有一个(两个主内容就没有主内容了),而且不能作为 article、aside、header、...


HTML5模板 Boilerplate( )。这个模板预置了HTML5“最佳实践”,包括基础的样式、腻子脚本和可选的工具,比如Modernizr。

文档的主内容指的是文档中特有的内容,导航链接、版权信息、站点标志、广告和搜索表单 等多个文档中重复出现的内容不算主内容(除非网页或文档的主要内容就是搜索表单)。

每个页面的主内容区只能有一个(两个主内容就没有主内容了),而且不能作为 article、aside、header、footer、nav 或 header 等其他HTML5语义元素的后代。上述这些元素倒是可以放到 main 元素中。

section 元素用于定义文档或应用中一个通用的区块。

如果使用无序列表( ul )和列表标签( li )来写导航,那最好改成用 nav 嵌套多个 a 标签。

W3C HTML5规范对 nav 元素的具体规定:

figure 建议用于包含注解、图示、照片、代码,等等。如果图片或代码需要一个小标题(放在正文不太合适),那么用 figure 。

figure >

details summary I ate 15 scones in one day /summary p Of course I didn t. It would probably kill me if I did. What a way to go. Mmmmmm, scones! /p /details

要禁用summary样式,可以使用针对Webkit的伪选择符: summary::-webkit-details-marker { display: none; }

“em 元素表示内容中需要强调的部分。” 所以不强调时使用 b 标签,或者在合适的情况下,选 i 。

WCAG简明参考指南( )

如果无法给 button 设置样式(比如 display: table-cell 或 display: flex),至少应该选择更接近的方案,比如 a 标签。

谷歌的Chrome浏览器“Accessibility Developer Tools”可跨平台调试前端代码

video src= myVideo.mp4 width= 640 height= 480 controls autoplay preload= auto loop poster= myVideoPoster.png What, do you mean you don t understand HTML5? /video

controls autoplay preload= auto 是说默认播放视频

视频窗口的大小设置:video { max-width: 100%; height: auto; }

关于视频播放,参见

在线转换连接工具:

HTML5离线Web应用编写指南:

关于应用缓存的一些设置:

一个很好的h5教程及参考网站:

service worker 是一段运行在浏览器后台进程里的脚本,它独立于当前页面,提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。教程可以参见:

设置主页面内容的列数:main { column-count: 4; }

1. 固定列数,可变宽度

以给列间添加间距和分隔线: main { column-gap: 2em; column-rule: thin dotted #999; column-width: 12em; }

断字 :word-wrap: break-word;

p >

截短文本

.truncate { width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: no-wrap; }

创建水平滚动面板

.Scroll_Wrapper { width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; } .Item { display: inline-flex; }

为了保证::before 和::after 显示,它们必须包含一个 content 值,就算空白也行。显示

.Scroll_Wrapper { width: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; /* 在WebKiet的触摸设备上出现 */ -webkit-overflow-scrolling: touch; /* 在支持的IE中删除滚动条 */ -ms-overflow-style: none; } /* 防止WebKit浏览器中出现滚动条 */ .Scroll_Wrapper::-webkit-scrollbar { display: none; }

在浏览器支持的情况下使用Flexbox,在不支持的情况下回退到另一种布局方案。比如:

@supports (display: flex) { .Item { display: inline-flex; } } @supports not (display: flex) { .Item { display: inline-block; } }

如果不支持@supports ,这两块代码都不会被应用。

在@supports 得到广泛支持以前,可以使用Modernizr这个JavaScript工具。目前,它是在CSS中实现分支的最可靠方式。


script src="https://img9.doubanio.com/js/libs/modernizr-2.8.3-custom.min.js" /script modernizr是一款检测css和h5属性的脚本,为适应兼容性而生。 []是属性选择符,比如以下规则: img[alt] { border: 3px dashed #e15f5f; } ^表示选择“以……开头”的选择符: img[alt^="film"] { /* 样式 */ } *表示“包含……”的选择符: [attribute*="value"] { /* 样式 */ } $表示“以……结尾”的选择符: [attribute$="value"] { /* 样式 *...


script src= /js/libs/modernizr-2.8.3-custom.min.js /script

modernizr是一款检测css和h5属性的脚本,为适应兼容性而生。

[]是属性选择符,比如以下规则: img[alt] { border: 3px dashed #e15f5f; }

^表示选择“以……开头”的选择符: img[alt^= film ] { /* 样式 */ }

*表示“包含……”的选择符: [attribute*= value ] { /* 样式 */ }

$表示“以……结尾”的选择符: [attribute$= value ] { /* 样式 */ }

~表示可以使用“空格分隔的”属性选择符(注意 ~ 符号),IE7都支持: [data-film~= film ] { color: red; }

可以选择第一项的选择符div:first-child { /* 样式 */ }

可以选择最后一项的选择符(css3开始支持): div:last-child { /* 样式 */ }

选择奇数个:.nav-Link:nth-child(odd) { /* 样式 */ }

选择偶数个: .nav-Link:nth-child(even) { /* 样式 */ }

CSS3提供了以下几个基于 nth 的规则: nth-child(n) nth-last-child(n) nth-of-type(n) nth-last-of-type(n)

@media (min-width: 55rem) { .Item { width: 25%; }

/* 每4个选1个,但仅限于最后4项 */

.Item:nth-child(4n+1):nth-last-child(-n+4),

/* 取得该集合后面的每一项 */

.Item:nth-child(4n+1):nth-last-child(-n+4) ~ .Item { border-bottom: 0; } }

.a-div:not(.not-me) { background-color: orange; border-radius: 50%; }

p:first-letter容易与伪元素混淆,CSS3要求把这种伪元素与伪类区分开。因此,现在应该写 p::first-letter。


IE9及以下版本不支持Flexbox。 .flex { display: flex; flex: 1; justify-content: space-between; } 要想支持安卓浏览器(v4及以下版本操作系统)和IE10,最终代码得这样写: .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: j...


IE9及以下版本不支持Flexbox。

.flex { display: flex; flex: 1; justify-content: space-between; }

要想支持安卓浏览器(v4及以下版本操作系统)和IE10,最终代码得这样写: .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }

-ms-是Microsoft,-webkit-是 WebKit,-moz-是Mozilla。

这是让Flexbox跨浏览器的唯一有效方式。

自动生成跨浏览器的兼容性CSS代码工具Autoprefixer( )。这是一个很快、准确而且安装简便的PostCSS插件。

垂直居中文本的CSS规则如下: .CenterMe { background-color: indigo; color: #ebebeb; font-family: Oswald , sans-serif; font-size: 2rem; text-transform: uppercase; height: 200px; display: flex; align-items: center; justify-content: center; }

div >

flex-direction: row-reverse,把最后一项的 margin-left: auto 改成 margin-right: auto

如果将某元素无端地设置为 display: inline-flex(比如包含该元素的元素没有被设置为 display: flex),那么这个元素就会像 inline-block 和 inline-table 一样保留元素间的空白。如果这个元素处于一个Flexbox中,空白就会消失,就跟 table 中的 table-cell 一样。

.InlineFlex { display: inline-flex; align-items: center; height: 120px; padding: 0 4px; background-color: indigo; text-decoration: none; border-radius: 3px; color: #ddd; }

使用 align-self 属性决定自己的对齐方式。

Flexbox为交叉轴对齐提供了以下值。 flex-start:把元素的对齐设置为 flex-start,可以让元素从Flexbox父元素的起始边开始。 flex-end:把元素的对齐设置为 flex-end,会 沿Flexbox父元素的末尾对齐该元素。 center:把元素放在Flexbox元素的中间。 baseline:让Flexbox元素中的所有项沿基线对齐。 stretch:让Flexbox中的所有项(没交叉轴)拉伸至与父元素一样大。

.FlexInner { border: 1px solid #ebebeb; background-color: #34005B; display: flex; height: 100px; flex: 1; } 这里的 flex 实际上是三个属性合体的简写:flex-grow、flex-shrink 和 flex-basis。关于这三个属性的详细介绍,可以参考规范原文:

对于伸缩项,如果 flex 属性存在(且浏览器支持),则使用它的值控制元素的大小,忽略宽度和高度值的设置, 即使它们的声明位于 flex 声明之后,也会被忽略。

flex-grow(传给 flex 的第一个值)是相对于其他伸缩项,当前伸缩项在空间允许的情况下可以伸展的量。 flex-shrink 是在空间不够的情况下,当前伸缩项相对于其他伸缩项可以收缩的量。 flex-basis(传给 flex 的最后一个值)是伸缩项伸缩的基准值。

简单的粘附页脚

body div >

html, body { margin: 0; padding: 0; } html { height: 100%; } body { font-family: Oswald , sans-serif; color: #ebebeb; display: flex; flex-direction: column; min-height: 100%; } .MainContent { flex: 1; color: #333; padding: .5rem; } .Footer { background-color: violet; padding: .5rem; }

@media (min-width: 30rem) { .FlexWrapper { flex-flow: row wrap; } .FlexHeader { width: 100%; } .FlexContent { flex: 1; order: 3; } .FlexSideOne { width: 150px; order: 2; } .FlexSideTwo { width: 150px; order: 4; } .FlexFooter { width: 100%; } }

此视要向后兼容的力度,可能需要把内容和两个侧边栏封装在另一个元素中。

最新版本:

Grid Layout Module Level 1:

让浏览器知道图片的三个版本: img src= scones_small.jpg srcset= scones_medium.jpg 1.5x, scones_ large.jpg 2x alt= Scones taste amazing

img srcset= scones-small.jpg 450w, scones-medium.jpg 900w sizes= (min-width: 17em) 100vw, (min-width: 40em) 50vw src= sconessmall. jpg alt= Scones

CSS中如何定义像素:

picture source media= (min-width: 30em) srcset= cake-table.jpg source media= (min-width: 60em) srcset= cake-shop.jpg img src= scones.jpg alt= One way or another, you WILL get cake. /picture

这里的 img 标签是浏览器不支持 picture 元素,或者支持 picture 但没有合适媒体定义时的后备。


所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。 建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。 在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: http://caniuse.com 。这个网站的界面简洁,查询方便。 本书示例代码的地址是: http://rwd.education/download.zip 或 https://github.com/benfrain/rwd 浏览器中用于呈现网页的区域叫 视口(viewport)。视口通常并不等...


所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。

在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: 。这个网站的界面简洁,查询方便。

本书示例代码的地址是: 或

浏览器中用于呈现网页的区域叫 视口(viewport)。视口通常并不等于屏幕大小,特别是可以缩放浏览器窗口的情况下。

meta name= viewport content= width=device-width 这个视口的 meta 标签是一种非标准的(但却是事实标准的)方式,它告诉浏览器怎么渲染网页。在这里, meta 标签想表达的意思是:按照设备的宽度(device-width)来渲染 网页内容。

要实现图片的自动缩放,也可以使用更通用的 width 属性,比如 width:100%。然而,这条规则在这里的效果不同。如果给 width 属性设置一个值,那么图片就会按照该值显示,不考虑自身固有宽度。

max-width: 100%;

所谓“断点”,就是某个宽度临界点,跨过这个点布局就会发生 显著变化。

实际的最小宽度可以使用不同的长度单位指定,比如百分比、em、rem和px。在CSS中,最小宽度媒体查询是这样写的: @media screen and (min-width: 50em) { /* 样式 */ }

基本上所有浏览器默认的文本大小都是16像素,因此用像素值除以16就可以得到rem值。

@media screen and (min-width: 50rem) { .IntroWrapper { display: table; table-layout: fixed; width: 100%; } .MoneyShot, .IntroText { display: table-cell; width: 50%; vertical-align: middle; text-align: center; } .IntroText { padding: .5rem; font-size: 2.5rem; text-align: left; } .Ingredients { font-size: .9rem; float: right; padding: 1rem; margin: 0 0 .5rem 1rem; border-radius: 3px; background-color: #ffffdf; border: 2px solid #e8cfa9; } .Ingredients h3 { margin: 0; } }

用SVG(Scalable Vector Graphics,可伸缩矢量图)可以简单地适用各种分辨率。

link rel= stylesheet media= screen and (orientation: portrait) href= portrait-screen.css /

导入样式表phone.css,条件是必须是屏幕设备,而且视口不超过360像素: @import url( phone.css ) screen and (max-width:360px);

使用CSS中的@import 会增加HTTP请求(进而影响加载速度)。

width:视口宽度。 height:视口高度。 device-width:渲染表面的宽度(可以认为是设备屏幕的宽度)。 device-height:渲染表面的高度(可以认为是设备屏幕的高度)。 orientation:设备方向是水平还是垂直。 aspect-ratio:视口的宽高比。16∶9的宽屏显示器可以写成 aspect-ratio:16/9。 color:颜色组分的位深。比如 min-color:16 表示设备至少支持16位深。 color-index:设备颜色查找表中的条目数,值必须是数值,且不能为负。 monochrome:单色帧缓冲中表示每个像素的位数,值必须是数值(整数),比如monochrome: 2,且不能为负。 resolution:屏幕或打印分辨率,比如 min-resolution: 300dpi。也可以接受每厘米多少点,比如 min-resolution: 118dpcm。 scan:针对电视的逐行扫描(progressive)和隔行扫描(interlace)。例如720p HD TV(720p中的p表示progressive,即逐行)可以使用 scan: progressive 来判断; 而1080i HD TV(1080i中的i表示interlace,即隔行)可以使用 scan: interlace 来判断。 grid:设备基于栅格还是位图。 上面列表中的特性,除 scan 和 grid 外,都可以加上 min 或 max 前缀以指定范围。看看下面的代码: @import url( tiny.css ) screen and (min-width:200px) and (maxwidth: 360px);

从原理上讲,位于下方的CSS样式会覆盖位于上方的目标相同的CSS样式,除非上方的选择符优先级更高或者更具体。

example_02-02展示了导航栏的生成方式

a href= # >

媒体查询的一个常见的使用场景,就是针对高分辨率设备编写特殊样式。比如: @media (min-resolution: 2dppx) { /* 样式 */ }

减小dppx值,可以扩大这个媒体查询的适用范围。

「阻塞渲染」仅是指该资源是否会暂停浏览器的首次页面渲染。无论CSS是否阻塞渲染,CSS资源都会被下载,只是说非阻塞性资源的优先级比较低而已。

多一个文件就要多一次HTTP请求,在某些条件下,HTTP请求多了会明显影响页面加载速度。

所有资源都采用了gzip压缩; 所有静态内容都缓存到了CDN; 所有多余的CSS规则都被清除了。

设置以内容实际大小的两倍(百分之二百)显示: meta name= viewport content= initial-scale=2.0,width =device-width /

允许用户最大将页面放大到设备宽度的三倍,最小可以将页面缩小至设备宽度的一半。 meta name= viewport content= width=device-width, maximum-scale=3, minimum-scale=0.5 / 甚至可以完全禁止用户缩放。禁止用户缩放 meta name= viewport content= initial-scale=1.0, user-scalable=no /

在CSS中写@viewport { width:320px; }。这同样可以将浏览器宽度设置为320像素。目前还没有多少浏览器支持这个CSS特性。考虑到面向未来,可以同时使用 meta 标签和@viewport 声明。

只针对支持JavaScript的浏览器编写相应的样式了。比如:.js .header { display: block; }。

@media (scripting: none) { /* 没有JavaScript时的样式 */ }

@media (scripting: enabled) { /* 有JavaScript时的样式 */ }

@media (scripting: initial-only) { /* JavaScript只在一开始有效的样式 */ }

“指针媒体特性用于查询鼠标之类的指针设备是否存在,以及存在时其精确的位置。

coarse 指针设备代表触摸屏设备中的手指。不过,这个值也可以是游戏机中的指针等不像鼠标那样能够提供精确控制的机制。 @media (pointer: coarse) { /* 针对coarse指针的样式 */ }

fine 指针设备可能是鼠标,也可能是手写笔或其他未来可能出现的精确指针设备

最保险的做法是假设用户在使用触摸屏设备,并相应地把界面元素调大。这样,即使用户使用的是鼠标,也不会影响体验。

@media (hover: on-demand) { /* 针对可通过启用程序实现悬停用户的样式 */ }

@media (hover) { /* 针对可悬停用户的样式 */ } 另外,还有 any-pointer 和 any-hover 媒体特性。这两个特性与前面的 pointer 和 hover 类似,只不过测试的不光是主输入机制,而是任意可能的输入设备。

我们可以在昏暗环境里减小所用颜色的亮度值。或者在光线充足的环境里提高亮度。环境媒体属性就是为解决这个问题而生的。 @media (light-level: normal) { /* 针对标准亮度的样式 */ } @media (light-level: dim) { /* 针对暗光线条件的样式 */ } @media (light-level: washed) { /* 针对强光线条件的样式 */ }

.Right { height: 625px; width: 10.4166667%; background-color: #03A66A; display: inline-block;

使用行内块(inline-block)来布局的最大问题,就是它会在HTML元素间渲染空白。

.WrapMiddle { width: 100%; font-size: 0; }

去掉留白。像前面的例子中使用大小为零的 font-size

关于如何去掉使用行内块时产生的空白: 。

要想完美地垂直居中,表元必须被包在一个表格元素中。