响应式网站设计布局 第1篇
屏幕窗口宽度小于600px时，改变样式 屏幕窗口宽度大于600px时，改变样式 也可以结合rem更加便捷的改变样式
响应式网站设计布局 第2篇
类似百分比， vw和vh参考浏览器窗口大小,vw代表窗口横向宽度；vh代表窗口纵向高度； vw只是一个单位，都可以用于表示宽度或高度的单位，如width：50vh 相当于宽度为屏幕高度的50% 如：
蓝色方块始终占屏幕窗口的50%
响应式网站设计布局 第3篇
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及 JavaScript，快速编写功能完善的网页及常见交互效果。
这里只简单的讲解一下 Bootstrap 的使用，这个框架功能很多，如果要全部讲解，能够专门开一个专栏讲解了。网上也有很多讲解这个框架怎么使用的博客是视频，感兴趣的同学可以自行去找。
将下载解压好的文件拖入到工程。
引入 Bootstraps CSS 文件
栅格化是指将整个网页视口的宽度分成12等份，每个盒子占用的对应的分数。
例如：一行排 4 个盒子，则每个盒子占 3 份，即（12 / 4 = 3）。
使用栅格布局，要使用类名为 row 的元素作为父级，子级才能使用栅格系统布局。
栅格系统布局以 col-*-* 的格式作为类名，如：col-xl-3 表示当视口宽度大于等于 1200px 时，该元素占了 3 份，即该元素宽度占视口宽度的 1/4 。
估计这对于新接触这个框架的同学有很多疑问，为什么这么写类名、为什么这么写就能实现这些功能等等，但是这些类名的命名和写法是框架开发者规定的，必须这么写，我们只能通过多写多练，将这些常用的类名记住，没有其他捷径。
下面通过一个例子，帮助大家理解：
Bootstrap 提供了很多 Button 类 的样式，也不用刻意去背，使用的时候知道在哪里找就可以了。
Bootstrap 提供了很多 表格类 的样式，感兴趣的同学可以去看一看。
此外，Bootstrap 还提供了现成的组件、字体图标等等，感兴趣的同学可以了解下。
接下来通过今日所学的媒体查询和 Bootstrap 框架，模仿腾讯全端实现下面的响应式布局效果。