《响应式Web设计实践》学习笔记

第1章 无处不在的Web
1.4  成为响应式的
Ethan Marcotte利用三种已有工具：媒介查询（media queries）、流动布局（fluid grids）和自适应图片（scalable images）创建了一个在不同分辨率屏幕下都能漂亮地显示的站点。
设备无关：所有的东西（组件、布局等）都能与不同类型的设备和平台相兼容。
“未来友好宣言”，http://futurefriend.ly
激光般专注：我们需要专注于那些对客户和业务来说，最最重要的事。
以数据为中心：以下面这些方式来定义数据：多样（灵活）的访问和通知途径、通过标准来协作、侧重于长期的完整性、包含有意义的且永久的内容引用、支持读写操作。
通用内容：机构良好的内容现在已经成为了网站里必需的一部分。
识别未知的船：一个高级且足够准确的设备种类数据库能够帮助我们简化适应设备差异的过程。
领导你的舰队：当我们通过设备集合来管理单独设备上的体验时，单个设备便可以以自己最擅长的方式来处理交互了。
渐进增强：先从一个基本的体验开始，然后使用流动布局和媒介查询这些技术来为功能更多、屏幕更大的设备增强使用体验。
第2章 流动布局
2.1.2  流动布局
在流动布局中，度量的单位不再是像素，而是变成了百分比。
2.1.3  弹性布局
通常情况下，在弹性布局中会以em来作为单位。1em相当于当前字体的大小。
大量研究表明，理想的阅读文本的行宽介于45到70个字符之间，利用弹性布局，你可以将容器的宽度设定为55em。
2.2  字体大小
2.2.1  像素
使用像素作为字体大小的单位，是与Web的灵活性原则背道而驰的做法。
2.2.2  em
2.2.3 百分比
2.2.4  rem
rem与em的区别在于：rem的大小与根元素-HTML元素-有关。
但移动平台还不支持rem
span {
font-size: 16px;
font-size: 1rem;  /* 支持rem的浏览器将会使用rem声明，因为它是在后面声明的，而不支持rem的浏览器将会使用第一条声明，并忽略rem声明 */
}
2.2.6  从像素转换
body {
font-size: 16px;
}
h1 {
font-size: 16px;
}
span {
font-size: 12px;
}
从px转换为em: 目标 / 上下文环境 = 结果
body {
font-size: 100%l;  /* 大部分浏览器默认字体为16px */
}
h1 {
font-size: 1.5em;  /*24px / 16px */
}
span {
font-size: .5em; /* 12px / 24px, 上下文环境为h1 24px */
}
2.3  网格布局
 网格使信息的展示变得有序、新颖、和谐。
 网格使得用户能够预测该从哪里获得信息，这在信息交流过程中很有帮助。
 在与原始总体设想相一致的前提下，网格使添加新的内容更为容易。
 网格能在设计单一解决方案时促进合作，而不必对总体设想的解决方案妥协。
2.3.1  从内容出发
2.3.2  设置网格 
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;  /* 通过使用box-sizing: border-box, 你可以让浏览器将padding的值算在已经定义好的元素宽度内部 */
#container {
width: 95%;
padding: .625em 1.0548523% 1.5em;  /* 10px / 16px, 10px / 948px, 24px / 16px，顶部和底部的padding值是由font-size的大小决定的，所以使用em。 */
aside img,
.main img,
.slats img {
width: 100%;  /* 让图片填满整个边栏 */
max-width: 100%; /* 不让图片的大小超过它的容器元素 */
}
表2.1  与表格相关的display值
值 相应元素 值 相应元素
table TABLE table-column COL
table-row TR table-column-group COLGROUP
table-row-group TBODY table-cell TD, TH
table-header-group THEAD table-caption CAPTION
table-footer-group TFOOT
.main {
display: table-cell;
}
aside {
display: table-cell;
width: 300px;
}
<!—[if (lt IE 8) & (!IEMobile)]>
<link rel=”stylesheet” href=”/css/ie.css” media=”all”>
<!—[endif]-->  /* 条件注释，IE8之前版本的IE(出去Windows Phone 7) 都会加载ie.css */
第3章 媒体查询
iPhone的布局视口为980px, Opera Mobile为850px, Android WebKit为800px。
3.1.2  视口标签和属性
<meta name=”viewport” content=”directive,directive” />
<meta name=”viewport” content=”width=device-width” />  // 将视口宽度设置为设备屏幕的宽度
<meta name=”viewport” content=”height=device-height” />  // 将视口高度设置为设备屏幕高度
<meta name=”viewport” content=”user-scalable=yes” />  // 允许用户在页面上进行缩放
<meta name=”viewport” content=”initial-scale=1, width=device-width” />  // 设置页面初始化时的缩放层级
@viewport {
width: device-width;
}  // 在CSS中将视口设置为设备宽度
3.2  媒介查询结构
一般形式：
@media [not|only] type [and] (expr) {
rules
}
3.3  内嵌样式与外部样式
@media screen and (min-width: 1300px) {
a {
text-decoration: underline;
}
} // 内嵌样式，当屏幕大于等于1300px时，链接有下划线
<link href=”style.css” media=”only screen and (min-width: 1300px)” /> //  外部样式
3.4  媒介查询顺序
3.4.1  从桌面端向下设计
/* base styles */
@media all and (max-width: 768px) {
…
}
@media all and (max-width: 320px) {
…
}
3.4.2  从移动端向上设计
/* base styles, for the small-screen experience, go here */
@media all and (min-width: 320px) {
…
}
@media all and (min-width: 768px) {
…
}
例如：
@media all and (min-width: 320px) {
aside {
display: table-cell;
width: 300px;
}
}
3.5  创建核心体验
把所有与布局