响应式web设计读书笔记

1.媒体查询可以在链接link标签和具体的CSS中使用；

2.通过<link>标签的 media 属性为样式表指定设备类型和其他条件 中间用and和（）来分隔，如下

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:     800px)" href="800wide-portrait-screen.css" />

3.视口宽度（width） 屏幕宽度（device-width） 前者指没有工具栏的宽度（完完全全展示网页内容的部分） 后者指屏幕的宽度或者分辨率

4.-----------------目标元素宽度÷上下文元素宽度=百分比宽度----------------------

具体的做法是：先选取一个上下文元素宽度 比如#content width=96% 从设计图上得到它的宽度是100px*96% 即96px

然后后面的目标元素，比如nav，其宽度百分比就是 20/96*100%

（百分比是按照上下文元素来算的，也就是按父元素算的）——严格把外面包裹它的第一层元素宽度当做100%

5.同样的em也是全看外面包裹的父元素来算

#content h1 {
font-family: Arial, Helvetica, Verdana, sans-serif;
text-transform: uppercase;
font-size: 4.3125em;
} /* 69 ÷ 16 */
#content h1 span {
display: block;
line-height: 1.052631579em; /* 40 ÷ 38 */
color: #757474;
font-size: .550724638em; /* 38 ÷ 69 */
}

可以看到<span>元素的文字大小（38 像素）是相对于其父元素的文字大小（69 像素） 而言的。而它的行高（40像素）则是相对于其本身的文字大小（38像素）而言。

6.在现代浏览器（包括 IE 7+）中要实现图片随着流动布局相应缩放非常简单。只需在 CSS 中作如下声明：
img { max-width: 100%; }
这样就可以使图片自动缩放到与其容器 100%匹配。

也就是可以让图片铺满你装图片的那个div，你需要给那个div做流性布局就好了 其实也就是width100% 或者你设50%那么就可以放两张刚刚好了,maxwidth一般是设定阀值的时候用的，避免图片因viewport太大而被拉伸的太大；

7.H5可以这么写

<a href="index.html">
<h2>The home page</h2>
<p>This paragraph also links to the home page</p>
<img src="home-image.png" alt="home-slice" />
</a>

很方便

8.