出版社: 人民邮电出版社
副标题: HTML5和CSS3实战
原作名: Responsive Web Design with HTML5 and CSS3
译者: 王永强
出版年: 2013-1-1
页数: 231
定价: 49.00元
装帧: 平装
丛书: 图灵程序设计丛书·Web开发系列
ISBN: 9787115299222
内容简介 · · · · · ·
随着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.1 为什么智能手机很重要(而老版的IE不再重要) 2
1.2 响应式设计一定是最佳选择吗 3
1.3 响应式网页设计的定义 3
1.4 为什么要在响应式设计上停滞不前 4
1.5 响应式网页设计示例 4
· · · · · · (更多)
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
· · · · · · (收起)
"响应式Web设计"试读 · · · · · ·
蒂姆•伯纳斯李在1991年制作并发布了第一个网站,如今刚刚过去21个年头。在这21年里,计算机和互联网快速发展,这个世界的面貌也日新月异。在这个过程中,网页设计从无到有,从简单渐至专业,从可有可无变为广受关注。网页设计方法也在跟随时代不断创新,从最初简单的文字排版,到表格布局,再到DIV+CSS,直到现在广为流行的网格布局、流式布局等,设计师和开发者们一直致力于为全..
丛书信息
喜欢读"响应式Web设计"的人也喜欢的电子书 · · · · · ·
喜欢读"响应式Web设计"的人也喜欢 · · · · · ·
响应式Web设计的话题 · · · · · · ( 全部 条 )



响应式Web设计的书评 · · · · · · ( 全部 8 条 )

也就这样,可看可不看。响应式web开发方法论而非技术教程

看看书的目录,好坑人啊

2013,响应式幻想

Responsive Web Design with HTML5 and CSS3
> 更多书评 8篇
-
烟雨 (烟锁重楼千里尽,雨打芭蕉万点残)
HTML5模板 Boilerplate(http://html5boilerplate.com/ )。这个模板预置了HTML5“最佳实践”,包括基础的样式、腻子脚本和可选的工具,比如Modernizr。 文档的主内容指的是文档中特有的内容,导航链接、版权信息、站点标志、广告和搜索表单 等多个文档中重复出现的内容不算主内容(除非网页或文档的主要内容就是搜索表单)。 每个页面的主内容区只能有一个(两个主内容就没有主内容了),而且不能作为 article、aside、header、...2018-11-27 10:01:04
HTML5模板 Boilerplate(http://html5boilerplate.com/ )。这个模板预置了HTML5“最佳实践”,包括基础的样式、腻子脚本和可选的工具,比如Modernizr。
文档的主内容指的是文档中特有的内容,导航链接、版权信息、站点标志、广告和搜索表单 等多个文档中重复出现的内容不算主内容(除非网页或文档的主要内容就是搜索表单)。
每个页面的主内容区只能有一个(两个主内容就没有主内容了),而且不能作为 article、aside、header、footer、nav 或 header 等其他HTML5语义元素的后代。上述这些元素倒是可以放到 main 元素中。
section 元素用于定义文档或应用中一个通用的区块。
如果使用无序列表(<ul>)和列表标签(<li>)来写导航,那最好改成用 nav 嵌套多个 a 标签。
W3C HTML5规范对 <nav> 元素的具体规定: http://www.w3.org/TR/html5/sections.html#the-nav-element
<figure> 建议用于包含注解、图示、照片、代码,等等。如果图片或代码需要一个小标题(放在正文不太合适),那么用<figure>。
<figure class="MoneyShot"> <img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones" /> <figcaption class="ImageCaption">Incredible scones, picture from Wikipedia</figcaption> </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简明参考指南( https://www.w3.org/WAI/WCAG20/glance/Overview.html )
如果无法给 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; }
关于视频播放,参见 http://alistapart.com/article/creating-intrinsic-ratios-for-video
在线转换连接工具:http://embedresponsively.com/
HTML5离线Web应用编写指南: https://www.w3.org/TR/2011/WD-html5-20110525/offline.html
关于应用缓存的一些设置: http://alistapart.com/article/application-cache-is-a-douchebag
一个很好的h5教程及参考网站: http://diveintohtml5.info/offline.html
service worker 是一段运行在浏览器后台进程里的脚本,它独立于当前页面,提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。教程可以参见:
https://www.w3.org/TR/service-workers/
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
设置主页面内容的列数:main { column-count: 4; }
1. 固定列数,可变宽度
以给列间添加间距和分隔线: main { column-gap: 2em; column-rule: thin dotted #999; column-width: 12em; }
断字 :word-wrap: break-word;
<p class="truncate">OK, listen up, I've figured outthe key eternal happiness. All you need to do is eat lots of scones.</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中实现分支的最可靠方式。
回应 2018-11-27 10:01:04 -
烟雨 (烟锁重楼千里尽,雨打芭蕉万点残)
<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"] { /* 样式 *...2018-11-26 09:05:18
<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。
回应 2018-11-26 09:05:18 -
烟雨 (烟锁重楼千里尽,雨打芭蕉万点残)
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...2018-11-21 08:55:38
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( https://github.com/postcss/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 class="MenuWrap"> <a href="#" class="ListItem">Home</a> <a href="#" class="ListItem">About Us</a> <a href="#" class="ListItem">Products</a> <a href="#" class="ListItem">Policy</a> <a href="#" class="LastItem">Contact Us</a> </div> 这是CSS: .MenuWrap { background-color: indigo; font-family: 'Oswald', sans-serif; font-size: 1rem; min-height: 2.75rem; display: flex; align-items: center; padding: 0 1rem; } .ListItem, .LastItem { color: #ebebeb; text-decoration: none; } .ListItem { margin-right: 1rem; } .LastItem { margin-left: auto; }
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。关于这三个属性的详细介绍,可以参考规范原文: https://www.w3.org/TR/css-flexbox-1/
对于伸缩项,如果 flex 属性存在(且浏览器支持),则使用它的值控制元素的大小,忽略宽度和高度值的设置, 即使它们的声明位于 flex 声明之后,也会被忽略。
flex-grow(传给 flex 的第一个值)是相对于其他伸缩项,当前伸缩项在空间允许的情况下可以伸展的量。 flex-shrink 是在空间不够的情况下,当前伸缩项相对于其他伸缩项可以收缩的量。 flex-basis(传给 flex 的最后一个值)是伸缩项伸缩的基准值。
简单的粘附页脚
<body> <div class="MainContent"> Here is a bunch of text up at the top. But there isn't enough content to push the footer to the bottom of the page. </div> <div class="Footer"> However, thanks to flexbox, I've been put in my place. </div> </body>
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%; } }
此视要向后兼容的力度,可能需要把内容和两个侧边栏封装在另一个元素中。
最新版本: https://www.w3.org/TR/css-flexbox-1/
Grid Layout Module Level 1: https://www.w3.org/TR/css3-grid-layout/
让浏览器知道图片的三个版本: <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中如何定义像素: https://www.w3.org/TR/css3-values/
<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 但没有合适媒体定义时的后备。
回应 2018-11-21 08:55:38 -
烟雨 (烟锁重楼千里尽,雨打芭蕉万点残)
所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。 建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。 在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: http://caniuse.com 。这个网站的界面简洁,查询方便。 本书示例代码的地址是: http://rwd.education/download.zip 或 https://github.com/benfrain/rwd 浏览器中用于呈现网页的区域叫 视口(viewport)。视口通常并不等...2018-11-19 08:59:38
所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。
建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。
在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: http://caniuse.com 。这个网站的界面简洁,查询方便。
本书示例代码的地址是: http://rwd.education/download.zip 或 https://github.com/benfrain/rwd
浏览器中用于呈现网页的区域叫 视口(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="#" class="CardLink CardLink_Hearts">Hearts </a> <a href="#" class="CardLink CardLink_Clubs">Clubs </a> <a href="#" class="CardLink CardLink_Spades">Spades </a> <a href="#" class="CardLink CardLink_Diamonds"> Diamonds</a> 接下来是CSS: .CardLink { display: block; color: #666; text-shadow: 0 2px 0 #efefef; text-decoration: none; height: 2.75rem; line-height: 2.75rem; border-bottom: 1px solid #bbb; position: relative; } @media (min-width: 300px) { .CardLink { padding-left: 1.8rem; font-size: 1.6rem; } } .CardLink:before { display: none; position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .CardLink_Hearts:before { content: "?"; } .CardLink_Clubs:before { content: "?"; } .CardLink_Spades:before { content: "?"; } .CardLink_Diamonds:before { content: "?"; } @media (min-width: 300px) { .CardLink:before { display: block; } }
媒体查询的一个常见的使用场景,就是针对高分辨率设备编写特殊样式。比如: @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
关于如何去掉使用行内块时产生的空白: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ 。
要想完美地垂直居中,表元必须被包在一个表格元素中。
回应 2018-11-19 08:59:38
-
烟雨 (烟锁重楼千里尽,雨打芭蕉万点残)
所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。 建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。 在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: http://caniuse.com 。这个网站的界面简洁,查询方便。 本书示例代码的地址是: http://rwd.education/download.zip 或 https://github.com/benfrain/rwd 浏览器中用于呈现网页的区域叫 视口(viewport)。视口通常并不等...2018-11-19 08:59:38
所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。
建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。
在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: http://caniuse.com 。这个网站的界面简洁,查询方便。
本书示例代码的地址是: http://rwd.education/download.zip 或 https://github.com/benfrain/rwd
浏览器中用于呈现网页的区域叫 视口(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="#" class="CardLink CardLink_Hearts">Hearts </a> <a href="#" class="CardLink CardLink_Clubs">Clubs </a> <a href="#" class="CardLink CardLink_Spades">Spades </a> <a href="#" class="CardLink CardLink_Diamonds"> Diamonds</a> 接下来是CSS: .CardLink { display: block; color: #666; text-shadow: 0 2px 0 #efefef; text-decoration: none; height: 2.75rem; line-height: 2.75rem; border-bottom: 1px solid #bbb; position: relative; } @media (min-width: 300px) { .CardLink { padding-left: 1.8rem; font-size: 1.6rem; } } .CardLink:before { display: none; position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .CardLink_Hearts:before { content: "?"; } .CardLink_Clubs:before { content: "?"; } .CardLink_Spades:before { content: "?"; } .CardLink_Diamonds:before { content: "?"; } @media (min-width: 300px) { .CardLink:before { display: block; } }
媒体查询的一个常见的使用场景,就是针对高分辨率设备编写特殊样式。比如: @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
关于如何去掉使用行内块时产生的空白: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ 。
要想完美地垂直居中,表元必须被包在一个表格元素中。
回应 2018-11-19 08:59:38 -
烟雨 (烟锁重楼千里尽,雨打芭蕉万点残)
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...2018-11-21 08:55:38
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( https://github.com/postcss/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 class="MenuWrap"> <a href="#" class="ListItem">Home</a> <a href="#" class="ListItem">About Us</a> <a href="#" class="ListItem">Products</a> <a href="#" class="ListItem">Policy</a> <a href="#" class="LastItem">Contact Us</a> </div> 这是CSS: .MenuWrap { background-color: indigo; font-family: 'Oswald', sans-serif; font-size: 1rem; min-height: 2.75rem; display: flex; align-items: center; padding: 0 1rem; } .ListItem, .LastItem { color: #ebebeb; text-decoration: none; } .ListItem { margin-right: 1rem; } .LastItem { margin-left: auto; }
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。关于这三个属性的详细介绍,可以参考规范原文: https://www.w3.org/TR/css-flexbox-1/
对于伸缩项,如果 flex 属性存在(且浏览器支持),则使用它的值控制元素的大小,忽略宽度和高度值的设置, 即使它们的声明位于 flex 声明之后,也会被忽略。
flex-grow(传给 flex 的第一个值)是相对于其他伸缩项,当前伸缩项在空间允许的情况下可以伸展的量。 flex-shrink 是在空间不够的情况下,当前伸缩项相对于其他伸缩项可以收缩的量。 flex-basis(传给 flex 的最后一个值)是伸缩项伸缩的基准值。
简单的粘附页脚
<body> <div class="MainContent"> Here is a bunch of text up at the top. But there isn't enough content to push the footer to the bottom of the page. </div> <div class="Footer"> However, thanks to flexbox, I've been put in my place. </div> </body>
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%; } }
此视要向后兼容的力度,可能需要把内容和两个侧边栏封装在另一个元素中。
最新版本: https://www.w3.org/TR/css-flexbox-1/
Grid Layout Module Level 1: https://www.w3.org/TR/css3-grid-layout/
让浏览器知道图片的三个版本: <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中如何定义像素: https://www.w3.org/TR/css3-values/
<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 但没有合适媒体定义时的后备。
回应 2018-11-21 08:55:38 -
烟雨 (烟锁重楼千里尽,雨打芭蕉万点残)
<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"] { /* 样式 *...2018-11-26 09:05:18
<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。
回应 2018-11-26 09:05:18
-
烟雨 (烟锁重楼千里尽,雨打芭蕉万点残)
HTML5模板 Boilerplate(http://html5boilerplate.com/ )。这个模板预置了HTML5“最佳实践”,包括基础的样式、腻子脚本和可选的工具,比如Modernizr。 文档的主内容指的是文档中特有的内容,导航链接、版权信息、站点标志、广告和搜索表单 等多个文档中重复出现的内容不算主内容(除非网页或文档的主要内容就是搜索表单)。 每个页面的主内容区只能有一个(两个主内容就没有主内容了),而且不能作为 article、aside、header、...2018-11-27 10:01:04
HTML5模板 Boilerplate(http://html5boilerplate.com/ )。这个模板预置了HTML5“最佳实践”,包括基础的样式、腻子脚本和可选的工具,比如Modernizr。
文档的主内容指的是文档中特有的内容,导航链接、版权信息、站点标志、广告和搜索表单 等多个文档中重复出现的内容不算主内容(除非网页或文档的主要内容就是搜索表单)。
每个页面的主内容区只能有一个(两个主内容就没有主内容了),而且不能作为 article、aside、header、footer、nav 或 header 等其他HTML5语义元素的后代。上述这些元素倒是可以放到 main 元素中。
section 元素用于定义文档或应用中一个通用的区块。
如果使用无序列表(<ul>)和列表标签(<li>)来写导航,那最好改成用 nav 嵌套多个 a 标签。
W3C HTML5规范对 <nav> 元素的具体规定: http://www.w3.org/TR/html5/sections.html#the-nav-element
<figure> 建议用于包含注解、图示、照片、代码,等等。如果图片或代码需要一个小标题(放在正文不太合适),那么用<figure>。
<figure class="MoneyShot"> <img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones" /> <figcaption class="ImageCaption">Incredible scones, picture from Wikipedia</figcaption> </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简明参考指南( https://www.w3.org/WAI/WCAG20/glance/Overview.html )
如果无法给 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; }
关于视频播放,参见 http://alistapart.com/article/creating-intrinsic-ratios-for-video
在线转换连接工具:http://embedresponsively.com/
HTML5离线Web应用编写指南: https://www.w3.org/TR/2011/WD-html5-20110525/offline.html
关于应用缓存的一些设置: http://alistapart.com/article/application-cache-is-a-douchebag
一个很好的h5教程及参考网站: http://diveintohtml5.info/offline.html
service worker 是一段运行在浏览器后台进程里的脚本,它独立于当前页面,提供了那些不需要与web页面交互的功能在网页背后悄悄执行的能力。教程可以参见:
https://www.w3.org/TR/service-workers/
http://www.html5rocks.com/en/tutorials/service-worker/introduction/
设置主页面内容的列数:main { column-count: 4; }
1. 固定列数,可变宽度
以给列间添加间距和分隔线: main { column-gap: 2em; column-rule: thin dotted #999; column-width: 12em; }
断字 :word-wrap: break-word;
<p class="truncate">OK, listen up, I've figured outthe key eternal happiness. All you need to do is eat lots of scones.</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中实现分支的最可靠方式。
回应 2018-11-27 10:01:04 -
烟雨 (烟锁重楼千里尽,雨打芭蕉万点残)
<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"] { /* 样式 *...2018-11-26 09:05:18
<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。
回应 2018-11-26 09:05:18 -
烟雨 (烟锁重楼千里尽,雨打芭蕉万点残)
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...2018-11-21 08:55:38
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( https://github.com/postcss/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 class="MenuWrap"> <a href="#" class="ListItem">Home</a> <a href="#" class="ListItem">About Us</a> <a href="#" class="ListItem">Products</a> <a href="#" class="ListItem">Policy</a> <a href="#" class="LastItem">Contact Us</a> </div> 这是CSS: .MenuWrap { background-color: indigo; font-family: 'Oswald', sans-serif; font-size: 1rem; min-height: 2.75rem; display: flex; align-items: center; padding: 0 1rem; } .ListItem, .LastItem { color: #ebebeb; text-decoration: none; } .ListItem { margin-right: 1rem; } .LastItem { margin-left: auto; }
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。关于这三个属性的详细介绍,可以参考规范原文: https://www.w3.org/TR/css-flexbox-1/
对于伸缩项,如果 flex 属性存在(且浏览器支持),则使用它的值控制元素的大小,忽略宽度和高度值的设置, 即使它们的声明位于 flex 声明之后,也会被忽略。
flex-grow(传给 flex 的第一个值)是相对于其他伸缩项,当前伸缩项在空间允许的情况下可以伸展的量。 flex-shrink 是在空间不够的情况下,当前伸缩项相对于其他伸缩项可以收缩的量。 flex-basis(传给 flex 的最后一个值)是伸缩项伸缩的基准值。
简单的粘附页脚
<body> <div class="MainContent"> Here is a bunch of text up at the top. But there isn't enough content to push the footer to the bottom of the page. </div> <div class="Footer"> However, thanks to flexbox, I've been put in my place. </div> </body>
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%; } }
此视要向后兼容的力度,可能需要把内容和两个侧边栏封装在另一个元素中。
最新版本: https://www.w3.org/TR/css-flexbox-1/
Grid Layout Module Level 1: https://www.w3.org/TR/css3-grid-layout/
让浏览器知道图片的三个版本: <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中如何定义像素: https://www.w3.org/TR/css3-values/
<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 但没有合适媒体定义时的后备。
回应 2018-11-21 08:55:38 -
烟雨 (烟锁重楼千里尽,雨打芭蕉万点残)
所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。 建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。 在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: http://caniuse.com 。这个网站的界面简洁,查询方便。 本书示例代码的地址是: http://rwd.education/download.zip 或 https://github.com/benfrain/rwd 浏览器中用于呈现网页的区域叫 视口(viewport)。视口通常并不等...2018-11-19 08:59:38
所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。
建议先为小屏幕设计内容、样式,然后再向大屏幕扩展。
在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站: http://caniuse.com 。这个网站的界面简洁,查询方便。
本书示例代码的地址是: http://rwd.education/download.zip 或 https://github.com/benfrain/rwd
浏览器中用于呈现网页的区域叫 视口(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="#" class="CardLink CardLink_Hearts">Hearts </a> <a href="#" class="CardLink CardLink_Clubs">Clubs </a> <a href="#" class="CardLink CardLink_Spades">Spades </a> <a href="#" class="CardLink CardLink_Diamonds"> Diamonds</a> 接下来是CSS: .CardLink { display: block; color: #666; text-shadow: 0 2px 0 #efefef; text-decoration: none; height: 2.75rem; line-height: 2.75rem; border-bottom: 1px solid #bbb; position: relative; } @media (min-width: 300px) { .CardLink { padding-left: 1.8rem; font-size: 1.6rem; } } .CardLink:before { display: none; position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .CardLink_Hearts:before { content: "?"; } .CardLink_Clubs:before { content: "?"; } .CardLink_Spades:before { content: "?"; } .CardLink_Diamonds:before { content: "?"; } @media (min-width: 300px) { .CardLink:before { display: block; } }
媒体查询的一个常见的使用场景,就是针对高分辨率设备编写特殊样式。比如: @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
关于如何去掉使用行内块时产生的空白: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ 。
要想完美地垂直居中,表元必须被包在一个表格元素中。
回应 2018-11-19 08:59:38
这本书的其他版本 · · · · · · ( 全部5 )
-
Packt Publishing (2012)6.4分 18人读过
-
人民邮电出版社 (2017)7.3分 32人读过
-
-
Packt Publishing (2012)暂无评分 3人读过
以下书单推荐 · · · · · · ( 全部 )
- 移动(可穿戴)设备的思考、设计与实现 (柏林遇见北海道)
- 书单-编程-前端 (LZX)
- Full Stack Web Developer (小镇)
- web&ui (Zoe)
- 前端初阶修炼 (阿树)
谁读这本书?
二手市场
订阅关于响应式Web设计的评论:
feed: rss 2.0
0 有用 lastmayday 2013-10-04 19:49:31
没讲多少响应式布局的东西, 后面基本在讲HTML5和CSS3, 不过对我这种对HTML5和CSS3都不熟悉的来说还是很不错的~
1 有用 Liza HO 2015-09-07 03:03:59
不响应不足以谈人生 T T
0 有用 juntao.qiu 2013-12-14 08:19:34
非常好读的一本书,可以边看边写
0 有用 一瓢之饮 2015-02-24 16:00:01
还不错
0 有用 木木 2014-11-20 11:30:00
可惜是黑白,好多颜色样式看不出来
0 有用 Clefairy 2021-02-14 23:29:49
2013年的啊,仍然看出有用的我哭晕在厕所……
0 有用 香蒲 2020-07-06 20:08:44
“HTML5、CSS3及响应式设计入门”
0 有用 且听风吟 2020-03-28 17:20:32
回来添加已读
0 有用 Vincent Wu 2019-10-18 12:29:50
内容不多,非常适合初学者对前端开发积累一点认识。
0 有用 啊呜~~ 2019-10-17 19:38:32
看了一半,感觉比较浅吧,适合快速的过一遍