响应式网站设计教程 第1篇
和视口元标签一起，你可以使用另外几个设定，但大体说来，上面那行就是你想要使用的。
你应该避免使用minimum-scale、maximum-scale，尤其是将user-scalable设为no。用户应该有权力尽可能大或小地进行缩放，阻止这种做法会引起访问性问题。
响应式设计指的是一个响应浏览环境的网页或者应用设计。它涵盖了很多 CSS 和 HTML 的功能和技术，现在基本上就是我们默认建设网站的方式。想一下你在手机上访问的网站，遇到一个缩放的桌面版网站，或者你需要向侧边滚动来寻找东西的网站可能是相当不寻常的。这是因为 Web 已经迁移到了这种响应式设计的方式上。
在这些课里学到的布局方式的帮助下，实现响应式设计也变得愈加简单。如果你今天新近了解 Web 开发，那么你与响应式设计早期相比，手边有多得多的工具。因而，你有必要检查下你所引用的任何材料的年纪。尽管历史上的文章仍然有用，现代的 CSS 和 HTML 的使用让创建一个优雅且实用的设计变得远远更加容易，且无论你的访客使用什么设备浏览网站。
响应式网站设计教程 第2篇
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 框架，模仿腾讯全端实现下面的响应式布局效果。
响应式网站设计教程 第3篇
这里有一个解决方法，它使用了calc()，如果你将vw单位加到了使用固定大小（例如em或者rem）的值组，那么文本仍然是可放缩的。基本来说，是vw加在了放缩后的值上。
这就是说，我们只需要指定标题的字体大小一次，而不是为移动端设定它，然后再在媒介查询中重新定义它。字体会在你增加视口大小的时候逐渐增大。