https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive
（译者注：全部按照教程的代码，并不能实现代码，我调试之后发了全部代码出来。ps：没有使用翻墙工具，谷歌给的例子访问不到。）
每个设备都有自己独特的优势和限制，要让这个网页在众多的不同的显示设备中被接受，作为一名Web开发者，你要尽力让这个页面支持所有设备。
目录：
前一篇教程已经把页面的基本内容填充好了，这一篇我们会将装饰它，并且让它做一系列不同分辨率的设备中都能够漂亮地显示。
依照移动优先的开发原则，我们从窄屏入手——类似手机——并且先建立起这方面的概念，然后再逐渐向大屏幕扩展。我们可以通过判断视窗宽度来实现不同的设计和布局。
早先我们创建了一对不同级别的设计定义内容如何来显示，现在我们需要页面适应不同的布局。我们需要设置一下断点——用与决定何时改变布局和风格——基于内容如何来适应不同的屏幕分辨率。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
风格引导能够有效地让访客对页面有一个高层次的认识并且确保你在设计上是统一的。
Colors
#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38
在前面的教程中，我们添加了“内容图片”，这些对于描述我们产品很重要。“装饰图片”不是内容所必须要的，但添加之后可以使访客更加关注我们的产品。
举个例子。带图片的标题可以引诱访客去阅读更多关于产品的内容。
可以很简单地应用，我们这里直接使用背景图片。应用一个简单的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;
}
在窄视图中，我们没有足够的空间去显示内容，所以只能降低元素大小。
在较大的视图中，我们就得考虑到访客离屏幕较远的情形，所以需要把元素增大，并且加大元素间的距离。
在我们的产品页中，我们让元素和边界保持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;
}
#section2 div img {
width: 30%;
margin: 1%;
box-sizing: border-box;
border-radius: 50% 50%;
box-shadow: black 0px 0px 5px;
}<img src="photo.png" srcset="photo@2x.png 2x">
@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;
}
}<!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>谷歌Web中文开发手册：3响应式,布布扣,bubuko.com
原文地址：http://blog.csdn.net/wowkk/article/details/26098951
