https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive
（译者注：所有按照教程的代码。并不能实现代码，我调试之后发了所有代码出来。ps：没有使用*工具，谷歌给的样例訪问不到。）
代码地址：http://download.csdn.net/detail/wowkk/7522475
每一个设备都有自己独特的优势和限制，要让这个网页在众多的不同的显示设备中被接受，作为一名Web开发人员，你要尽力让这个页面支持所有设备。
文件夹：
- 加入viewport
- 应用简单样式
- 设置第一个断点
- 限制最大宽度的设计
- 改变间距和文字大小
- 让元素自适应
- 小结
前一篇教程已经把页面的基本内容填充好了，这一篇我们会将装饰它，而且让它做一系列不同分辨率的设备中都能够美丽地显示。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd293a2s=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
按照移动优先的开发原则。我们从窄屏入手——相似手机——而且先建立起这方面的概念。然后再逐渐向大屏幕扩展。我们能够通过推断视窗宽度来实现不同的设计和布局。
早先我们创建了一对不同级别的设计定义内容怎样来显示，如今我们须要页面适应不同的布局。
我们须要设置一下断点——用与决定何时改变布局和风格——基于内容怎样来适应不同的屏幕分辨率。
使用viewport
从窄屏開始然后逐级扩展
依据断点触发让内容去适应分辨率
依据主要断点创建高级别布局版本号
加入viewport
就算是最简单的页面，也要加入viewport标签，它是你开发多设备支持经验的关键。
没有它，你的站点是不能在移动设备上有个好的表现的。
引入viewport会让浏览器觉得页面须要缩放以适应屏幕。有非常多种配置方案，我们默认这样设置：（在<head>里声明一次就可以）
<meta name="viewport" content="width=device-width, initial-scale=1.0">应用简单样式
我们的产品和公司常常须要一个特别的广告而且支持不同的风格。
风格引导
风格引导能够有效地让訪客对页面有一个高层次的认识而且确保你在设计上是统一的。
Colors
#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38
加入装饰图片
在前面的教程中。我们加入了“内容图片”，这些对于描写叙述我们产品非常重要。
“装饰图片”不是内容所必须要的。但加入之后能够使訪客更加关注我们的产品。
举个样例。
带图片的标题能够引诱訪客去阅读很多其它关于产品的内容。
能够非常easy地应用，我们这里直接使用背景图片。应用一个简单的CSS方式。
#headline {
padding: 0.8em;
color: white;
font-family: Roboto, sans-serif;
background-image: url(backgroundimage.jpg);
background-size: cover;
}选择一个简单的“模糊”（虚化）的背景图片能够让文字阅读变得简单。
设置background-size : cover;能够保证图片正常的纵横比。
设置第一个断点
如今的设计，在视图宽度达到600px之后就变得有点难看了。我们的想法是，每行的文字长度不要超过10个（最佳阅读长度）。这就是我们接下来想改变的。
【眼下的情况是，每行文字的长度会随着视图宽度添加而添加】
600px是一个比較好的断点，我们用“媒体查询”的技术来实现。
@media (min-width: 600px) {
}这样有更大的空间去让页面适应更大的视图窗体。
提示：你不用又一次设置所有元素，仅仅要相应做一些调整就可以。
我们须要做的：
约束设计的最大宽度。
改变元素的padding属性而且改动字体大小。
让注冊表单浮动在标题简单介绍里；
让视频浮动于主体内容。
减少图片大小而且以表格形式展示。
约束设计的最大宽度
仅仅有两个主要布局：一个窄视图和一个宽视图。这样能够简化我们的构建过程。
如今我们不想考虑更大宽度的视图会再有不同的布局，让宽度超过800px时，内容样式将不再变化。
那能够加入多一个div，放在某模块里面，应用一个margin : auto;让它居中显示。
<div id="section1">
<div class="container">
<h2>What will I learn?
</h2>
.container {
margin: auto;
max-width: 800px;
}
改变元素的padding属性而且改动字体大小
在窄视图中，我们没有足够的空间去显示内容。所以仅仅能减少元素大小。
在较大的视图中，我们就得考虑到訪客离屏幕较远的情形，所以须要把元素增大，而且加大元素间的距离。
在我们的产品页中，我们让元素和边界保持5%宽度的距离而且增大元素大小。来解决问题。
#headline {
padding: 20px 5%;
}让元素适应宽视图
窄视图仅仅是简单线性地从上往下排布模块，但宽视图给了我们很多其它的空间去展示模块内容。在我们产品页中能够这么来做：
让“注冊表单”环绕着“简单介绍”；
将“视频”定位到“关键点”的右边；
铺排“图片”；
扩展“表格”。
浮动“表单”
如今我们有很多其它的空间，那就得打破原有的布局方式。更有效地使用水平上的空间。
#headline #blurb {
float: left;
font-weight: 200;
width: 50%;
font-size: 18px;
box-sizing: border-box;
padding-right: 10px;
}
#headline #register {
float:right;
padding: 20px;
width: 50%;
box-sizing: border-box;
font-weight: 300;
}#headline {
padding: 20px 5%;
}浮动“视频”
在窄视图中，“视频”宽度是100%，而且排布在“关键点”之后。
在宽视图中，这样做会让视频显得太大，失真。
所以“视频”须要在窄视图的垂直流排布中脱离出来，并排与“详情”显示。
#section1 ul {
box-sizing: border-box;
float: left;
width: 50%;
padding-right: 1em;
}
#section1 video {
width: 50%;
float: right;
}铺排图片
在窄视图中，图片也常常是占满屏幕然后垂直排布的，这在宽视图中肯定是不行的。
为了让图片看起更有条理性，我们将它们宽度设置为30%。并列。
然后加点边框看起来吸引人一点。
#section2 div img {
width: 30%;
margin: 1%;
box-sizing: border-box;
border-radius: 50% 50%;
box-shadow: black 0px 0px 5px;
}让图片响应
使用图片时，要考虑到当前的视图的像素大小。
这个web建立在96dpi的屏幕。而如今的设备像素密度越来越高，这种话，原本适合在96dpi显示的图片，在高dpi设备上的显示效果将变得非常糟糕。
有一个方法如今还不是常常应用到。假设浏览器支持的话，你能够在高密度像素的窗体相应显示高像素密度的图片。
<img src="photo.png" srcset="photo@2x.png 2x">表格
表格非常难在窄视图中表达，须要用比較特殊的方式。
在窄视图中。我们的表格仅仅有两列，然后随着视图宽度变大而发生变化。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd293a2s=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="表格响应式" />
我们要为表格专门设置一个断点。为移动优先原则建表格时，非常难去撤销所应用的样式，所以得为窄视图专门的CSS，来灵活处理。
@media screen and (max-width: 600px) {
table thead {
display: none;
}
table td {
display: block;
position: relative;
padding-left: 50%;
padding-top: 13px;
padding-bottom: 13px;
text-align: left;
background: #e9e9e9;
}
table td:before {
content: attr(data-th) " :";
display: inline-block;
color: #000000;
background: #e9e9e9;
border-right: 2px solid transparent;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 33%;
max-height: 100%;
font-size: 16px;
font-weight: 300;
padding-left: 13px;
padding-top: 13px;
}
}小结
恭喜。如今你已经创建了第一个简单的能够适应在不同分辨率设备中的产品页面。
按照下面的提示，你将有个更好的開始：
01 创建一个基础的“信息架构”而且在编码之前理清楚你要表达的内容。
02 一定使用viewport标志
03 创立你基础的移动优先的经验
04 当你有这些经验后。就能够加入很多其它的断点来适应很多其它不同宽度的视图。
05 保持迭代
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
CS256: Mobile Web development - structure
</title>
<style>
#headline { padding: 0.8em; background-image: url(img/back.jpg); background-size:
cover; } #section2 div img { width: 80%; margin: 1%; } @media (min-width:
600px) { #headline { overflow:hidden; padding: 20px 5%; } #headline #blurb
{ float: left; font-weight: 200; width: 50%; font-size: 18px; box-sizing:
border-box; padding-right: 10px; } #headline #register { float:right; padding:
20px; width: 50%; box-sizing: border-box; font-weight: 300; } .container
{ margin: auto; max-width: 800px; } #section1{ overflow:hidden; } #section1
ul { box-sizing: border-box; float: left; width: 50%; padding-right: 1em;
} #section1 video { width: 50%; float: right; } #section2 div img { width:
30%; margin: 1%; box-sizing: border-box; border-radius: 50% 50%; box-shadow:
black 0px 0px 5px; } } @media screen and (max-width: 600px) { #section3{
overflow: hidden; } table{ width: 100%; } table thead { display: none;
} table td { display: block; position: relative; padding-left: 50%; padding-top:
13px; padding-bottom: 13px; text-align: left; background: #e9e9e9; } table
td:before { content: attr(data-th) " :"; display: inline-block; color:
#000000; background: #e9e9e9; border-right: 2px solid transparent; position:
absolute; top: 0; left: 0; bottom: 0; width: 33%; max-height: 100%; font-size:
16px; font-weight: 300; padding-left: 13px; padding-top: 13px; } }
</style>
</head>
<body>
<div id="headline">
<h1>
移动页面开发
</h1>
<h2>
开发移动页面的经验
</h2>
<div id="blurb">
<p>
你已经听说过移动端适应是个大问题，而且你也不知道怎样将传统的桌面站点转换成为一个高速的、有效的多屏幕适应的Web App
</p>
<p>
做这个教程就是用来教Web开发人员关于怎样积累这些技术和经验的。
</p>
<p>
这个教程会首先注重“移动优先”的Web App，要保证先在下面设备中正常表现：
</p>
<ul>
<li>
Android,
<li>
iOS,
<li>
and others.
</ul>
</div>
<form method="post" id="register">
<h2>
Register for the launch
</h2>
<div>
<label for="name">
名字
</label>
<input type="text" name="name" id="name" placeholder="张三" required>
</div>
<div>
<label for="email">
邮箱
</label>
<input type="email" name="email" id="email" placeholder="neo@example.com"
required>
</div>
<div>
<label for="tel">
电话
</label>
<input type="tel" name="tel" id="tel" placeholder="18888888888" required>
</div>
<input type="submit" value="注冊">
</form>
</div>
<div id="section1">
<div class="container">
<h2>
我能够学到什么？
</h2>
<p>
完毕课程之后，你能够开发一个高水平的Web App
</p>
<p>
你能够学到下面几点
</p>
<ul>
<li>
开发一个完美的能在移动设备流量的站点
</li>
<li>
使用各种工具去測试这个站点的表现
</li>
<li>
将这种技术应用到你未来的项目
</li>
</ul>
<video controls poster="img/product.jpg">
<source src="video/product.mp4" type="video/mp4">
</source>
<source src="video/product.webm" type="video/webm">
</source>
<p>
抱歉！您的浏览器无法播放该视频。
<a href="udacity.mov">
请点击这里下载。
</a>
.
</p>
</video>
<br>
</div>
</div>
<div id="section2">
<h2>
指导老师
</h2>
<p>
移动行业率先者
</p>
<div id="images">
<img src="img/p1.jpg" alt="Mp1" srcset="photo@2x.png 2x">
<img src="img/p2.jpg" alt="Mp2" srcset="photo@2x.png 2x">
<img src="img/p3.jpg" alt="Mp3" srcset="photo@2x.png 2x">
</div>
<br>
</div>
<div id="section3">
<h2>
我为什么要操心移动设备的反应？
</h2>
<p>
它们太普及了！
</p>
<table>
<caption>
<p>
数据来自
<a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">
StatsCounter
</a>
</p>
</caption>
<thead>
<tr>
<th>
国家
</th>
<th>
桌面分享
</th>
<th>
平板分享
</th>
<th>
手机分享
</th>
</tr>
</thead>
<colgroup>
<col span="1">
<col span="1">
<col span="1">
<col span="1">
</colgroup>
<tbody>
<tr>
<td data-th="Country">
<a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">
印度
</a>
</td>
<td data-th="Desktop share">
32%
</td>
<td data-th="Tablet share">
1%
</td>
<td data-th="Mobile share">
67%
</td>
</tr>
<tr>
<td data-th="Country">
<a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">
大不列颠
</a>
</td>
<td data-th="Desktop share">
69%
</td>
<td data-th="Tablet share">
13%
</td>
<td data-th="Mobile share">
18%
</td>
</tr>
<tr>
<td data-th="Country">
<a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">
美国
</a>
</td>
<td data-th="Desktop share">
69%
</td>
<td data-th="Tablet share">
9%
</td>
<td data-th="Mobile share">
22%
</td>
</tr>
<tr>
<td data-th="Country">
<a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">
中国
</a>
</td>
<td data-th="Desktop share">
86%
</td>
<td data-th="Tablet share">
4%
</td>
<td data-th="Mobile share">
10%
</td>
</tr>
</tbody>
</table>
<br>
</div>
<div id="footer">
<div class="container">
<p>
还是须要脚部信息的~
</p>
</div>
</div>
</body>
</html>