企业面试题: bootstrap响应式实现的原理

考核内容: bootstrap的CSS3应用，及布局原理

题发散度: ★

试题难度: ★★

解题思路:

媒体查询（media）

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

行列布局（12等分）

bootstrap布局划分屏幕空间采用的是12等分，而不是别的什么等分？确实奇妙，这里的12太舒服了。它可以被1、2、3、4、6、12共6个数字整除，本来就是用来分空间的系统，当然可以更好的被整除最好了，这样怎么分都愉快。

比如

两个div分空间，分别占用50%，或者一个1/3一个2/3，或者1/4对3/4

3个div分空间，分别占用1/3，或者两个1/6一个2/3，或者两个1/4对1/2

使用12等分都是很方便的事情。相比之下，10等分的话，1，2，5，10整除，被3、4都不能整除，划分比例就不那么爽。

更多的可选列表：

数字11 质数不用考虑

数字9 ，被1，3，9整除

数字8，被1，2，4，8整除

数字7，质数不用考虑

数字6，被1，2，3，6整除

数字5，质数不用考虑

数字4，被1，2，4整除

数字3，质数，只能被1，3整除，想要等分就太麻烦

数字2，1，2，想要1/3就麻烦

数字1，想要1/3、1/2就麻烦

所以，12就是最好的。