任务目的
- 使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局，根据屏幕宽度，元素占的栏数不同。
任务描述
- 需要实现如 效果图 所示，调整浏览器宽度查看响应式效果，效果图中的红色的文字是说明，不需要写在 HTML 中。
任务注意事项
- 网格布局的作用在于更有效地控制元素在网页中所占比例的大小。比如，博客中有一个留言板模块，在比较大的屏幕上，我们希望它占了右边 25% 的宽度，在手机等比较小的屏幕上，我们希望它占 100% 的宽度，出现在博客文章下方。网格布局是一种实现这一需求的办法，它的好处是，把所有的宽度分为固定栏数（常用 12 栏），从而更高效的控制元素宽度。而这功能，我们使用 HTML 和 CSS 就能实现了。
- 以 BootStrap 的网格系统为例，DOM 元素类名形如 col-md-4；其中 col 是“列” column 的缩写；md 是 medium 的缩写，适用于应屏幕宽度大于 768px 的场景；4 是占四栏的意思。因此，col-md-4 的意思是，在屏幕宽度大于 768px 时，该元素占四栏。
在线学习参考资料
- BootStrap 官网：如果你没用过的话，至少了解一下它是做什么的
- Bootstrap grid examples：改变浏览器宽度，查看不同类名元素的表现，理解网格系统的作用。然后，通过“审查元素”查看对应 CSS，思考这一系统是如何实现的
- BootStrap 带 offset 的网格系统
- Creating Your Own CSS Grid System：你可以先自己想想怎么实现，没有思路的话看看别人的做法
响应式网格（栅格化）布局总结
1、 响应式网页设计
响应式网页设计（Responsive web design，缩写为RWD），或称自适应网页设计、回应式网页设计、对应式网页设计。是一种网页设计的技术方法，该设计可使网站在多种浏览器设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。
采用RWD设计的网站，使用CSS3 Media queries，流式的基于比例的网络和自适应大小的图像以适应不同大小的设备。
流式网络概念要求页面元素使用相对单位如百分比，或字体排印学调整大小，而不是绝对的单位如像素或点。（可先用像素排版，再用元素大小/容器大小计算百分比）。
灵活的图像也以相对单位调整大小（最大到100%），以防止它们显示在包含他们的元素之外。
Media queries，允许网页根据访问站点设备的特点而使用不同CSS样式规则，最常用的是浏览器的宽度。
2、 CSS3 @media Rule
@media rule用于定义不同类型或设备媒体的展示规则。在CSS2中，这被称为media types，在CSS3中被称为media queries。
Media queries查询设备能力，可以查出很多内容，比如：视口的长宽，设备长宽，方向（手机是在风景模式还是肖像模式），解析度等
CSS 语法：
@media not|only mediatype and (media feature) {
CSS-Code;
}
也可对不同媒体使用不同样式表
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
Media Types
all：用于所有类型设备。
print：用于打印机。
screen：用于电脑显示屏，平板，手机等。
Media Features
any-hover：是否有任何可用的输入机制允许用户将鼠标悬停在元素上？
any-pointer：任何可用的输入机制是指向设备，如果是，它是多么准确？
aspect-ratio：视口的宽高比。
color：输出设备每个颜色的bit数。
color-index：设备可展示的颜色数。
grid：设备是灰度还是位图。
height：视口高度。
hover：主要的输入机制是否允许用户将鼠标悬停在元素上。
inverted-colors：浏览器或底层操作系统是否反色。
light-level：当前环境光级别。
max-aspect-ratio：展示区域的宽高最大比。
max-color：输出设备每个颜色的最大bit数。
max-color-index：设备可展示的最多颜色数。
max-device-aspect-ratio：设备最大宽高比。
max-device-height：设备最大高度，例如电脑屏幕。
max-device-width：设备最大宽度，例如电脑屏幕。
max-height：展示区域最大高度，例如浏览器窗口。
max-monochrome：在单色或灰度设备上每个颜色的最大bit数。
max-resolution：设备最大分辨率，使用dpi或dpcm。
max-width：展示区域的最大宽度，例如浏览器窗口。
min-aspect-ratio：展示区域最小宽高比。
min-color：输出设备每个颜色最少bit数。
min-color-index：设备可展示的最小颜色数。
min-device-aspect-ratio：设备最小宽高比。
min-device-width：设备最小宽度，比如电脑屏幕。
min-device-height：设备最小高度，比如电脑屏幕。
min-height：展示区域最小高度，比如浏览器窗口。
min-monochrome：在单色或灰度设备上每个颜色的最小bit数。
min-resolution：设备最小分辨率，使用dpi或dpcm。
min-width：展示区域最小宽度，比如浏览器窗口。
monochrome：单色或灰度设备每个颜色的bit数。
- orientation：视口的方向（风景模式或肖像模式）
- overflow-block：输出设备如何处理沿着块轴溢出视口的内容。
- overflow-inline：可以滚动沿着内联轴溢出视口的内容。
pointer：主要的输入机制是指向设备，如果是，它是多么准确？
resolution：输出设备分辨率，使用dpi或dpcm。
scan：输出设备的扫描过程。
scripting：scripting（比如javascript）是否可用。
update-frequency：输出设备可以多快修改内容的外观。
width：视口宽度。
3、 HTML <link>标签media属性
Media属性指定不同媒体类型使用哪一个CSS样式表。
语法
<link media="value">
可用操作符
and：and操作符。
not：not操作符。
，：or操作符。
设备
all：默认值，用于所有设备。
print：用于打印预览模式或打印的纸张。
screen：用于电脑屏幕，平板或智能手机等。
speech：用于“读取”页面的屏幕阅读器。
值：
aspect-ratio：指定目标展示区域的宽高比。使用“min-”和“max-”像素。
example: media="screen and (max-aspect-ratio:16/9)"
color：指定每个颜色的bit数。
example: media="screen and (min-color:3)"
color-index：颜色数。
example: media="screen and (min-color-index:256)"
grid：指定展示设备是网格还是位图。“1”代表网格，“0”代表其他。
example: media="handheld and (grid:1)"
height：制定展示区域高度。使用“min-”和“max-”像素。
example: media="screen and (max-height:700px)"
monochrome：指定单色帧缓冲区中每个像素的位数。使用“min-”和“max-”像素。example: media="screen and (min-monochrome:2)"
- orientation：指定展示目标或纸张的方向。可取值为：“portrait”或“landscape”。 example: media="all and (orientation: landscape)"
resolution：指定显示目标或纸张的像素密度（dpi或dpcm）。使用“min-”和“max-”像素。
example: media="print and (min-resolution:300dpi)"
scan：指定tv的扫描方法。可取值为：“progressive”和“interlace”。
example: media="tv and (scan:interlace)"
width：指定目标展示区域的宽度。使用“min-”和“max-”像素。
example: media="screen and (min-500px)"