为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。
大部分的基础内容我们已经讲到了，现在讲点底层内容。Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象，修改它则更新视图。这让状态管理非常简单且直观，不过理解它的原理也很重要，可以避免一些常见问题。下面我们开始深挖 Vue.js 响应系统的底层细节。如何追踪变化把一个普通对象传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用 Object.
Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面，使其在各个尺寸的屏幕上表现良好。下面我们列出了如何禁用这一特性，就像这个非响应式布局实例页面一样。禁止响应式布局有如下几步：移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：<meta>。通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px !important;
根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。超级提示： 不需要为 <iframe>
看到"响应式设计"一词时，您会想到什么？移动设备还是台式设备？它的设计方式能否适应各种屏幕尺寸？使用移动触控还是使用鼠标？组件是否会根据其在页面上的位置而改变形状？这些可能是我们过去对响应式设计的认知，但肯定不是全部。考虑响应式设计时，我们可以（也应该）考虑响应式设计如何影响用户的使用背景，以及如何根据用户需求和体验作出最快的响应。
关注时代Java
