Responsive Web Design 响应式网站设计学习笔记

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).
响应式网站设计使得网页在所有的设备上都能完美地显示（包括电脑，平板和手机）。
Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
响应式网站设计使用了 CSS 和 HTML 来调整网页内容，包括重新计算尺寸，隐藏，收缩，放大和移动。

如何实现响应式网站设计

1. 允许网页宽度自动调整

在 HTML 代码头部添加：
<meta name="viewport" content="width=device-width, initial-scale=1" />

2. 不使用绝对宽度

不使用绝对宽度，例如 width: 300px;
使用百分比相对宽度，例如 width: 20%; 或者 width: auto;

3. 使用相对大小的字体

例如 font-size: 1.5em;

4. 图片的自适应

例如 img { max-width: 100%;}

5. 使用流动布局

流动布局：各个区块的位置都是浮动的，不是固定不变的。
float 的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

例如：

.main {
  float: right;
  width: 70%;
}
.leftBar {
  float: left;
  width: 25%;
}

7. 选择加载 CSS

自动探测屏幕宽度，然后加载相应的 CSS 文件。这里依赖于 CSS3 Media Queries。
例如：
当屏幕宽度小于 400px 时候，加载 tinyScreen.css。
当屏幕宽度在 400px 到 600px 之间时，加载 smallScreen.css。

<link rel="stylesheet" type="text/css"　　　　media="screen and (max-device-width: 400px)"　　　　href="tinyScreen.css" />

<link rel="stylesheet" type="text/css"　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"　　　　href="smallScreen.css" />

6. CSS的 @media 规则

在同一个 CSS 文件中，也可以根据不同的屏幕分辨率，选择应用不同的 CSS 规则。
例如：如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}
　　　　#sidebar {
　　　　　　display:none;
　　　　}
　　}

引用：
HTML Responsive Web Design
自适应网页设计（Responsive Web Design）

Responsive Web Design 响应式网站设计 学习笔记