Bootstrap 支持的设备类型

为了适用不同的屏幕宽度，Bootstrap 使用 CSS 的媒体查询（media query）来检测浏览器视口的宽度。然后，再根据条件加载相应的样式表。

Bootstrap 内部支持 5 种不同的布局，最大布局中每一列的宽度为 70px，而常规布局中每一列宽度是 60px。在适合平板电脑的布局中，列宽缩小为 42px，再窄一点，每一列就会流动起来，变成在垂直方向上堆叠且都与视口同宽。

Bootstrap 所支持的几个media queries都放在了一个文件中，可以让你的项目更灵活的去适应不同设备和屏幕分辨率。见表 2。

Bootstrap 的媒体查询允许基于视口大小移动、显示或隐藏内容。下面的媒体查询用来创建 Bootstrap 网格系统中的关键分界点：

1. /* 大屏幕 */
2. @media (min-width: 1200px) { ... }
4. /* 平板电脑和小屏电脑之间的分辨率 */
5. @media (min-width: 768px) and (max-width: 979px) { ... }
7. /* 横向放置的手机和竖向放置的平板之间的分辨率 */
8. @media (max-width: 767px) { ... }
10. /* 横向放置的手机及分辨率更小的设备 */
11. @media (max-width: 480px) { ... }

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

来源：ixygj197875