响应式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.

响应式web设计读书笔记

标签：

原文地址：http://www.cnblogs.com/xisitan/p/4627807.html