前言：这是一个系列，前面还有
Bootstrap-sass研究—预备篇：css选择器
Bootstrap-sass研究---(1)变量
接下来要讲的是响应式设计，我们先跳过mixin，原因是里面的方法太多很难概括，有必要的时候分别再谈就好。
响应式设计大家可能也都有所耳闻，wikipedia上的解释是：
Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
简而言之，就是通过设置使得网站在不同的终端上都拥有最佳的用户体验。
好了，了解了下概念，我们继续看代码。
首先要赞一下bootstrap-sass的结构，真的是非常非常的清晰，极其的友好。
/vendor/assets/stylesheets/bootstrap-responsive.scss
@import "bootstrap/responsive";
通过它的提示我们再找到
/vendor/assets/stylesheets/bootstrap/responsive.scss
@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins";
@import "bootstrap/responsive-utilities";
@import "bootstrap/responsive-1200px-min";
@import "bootstrap/responsive-768px-979px";
@import "bootstrap/responsive-767px-max";
@import "bootstrap/responsive-navbar";
这里我删掉了一些注释，根据文件提示我们知道我们要做的事情与上面提到有紧密的联系，变量我们看过了，mixin我们先略过，那么接下去比较重要的就是
@import "bootstrap/responsive-utilities";这个文件。
让我们继续深入
responsive相关的文件除了我们不能略过的mixin和variable之外，responsive-utilities应该算是基石，通过bootstrap对responsive比较简短的介绍，我们知道他有的一些可以让我们自动选择隐藏的设置hidden-table,hidden-phone等等，这个文件主要就是对这些class在不同的分辨率下做了隐藏设置，并没有什么难懂的地方。而print组件也如其名，就是控制打印组件的样式，这里只对是否要打印做了简单的设置，非常清晰。
下面就是有一系列带着数字的文件，显然大家也能想到这是针对不同分辨率的样式设计，先跳过，看看responsive-navbar是怎么工作的吧。
简单分成两块，一块是分辨率为 ”平板及以下“，另一块是桌面。
桌面基本上还是沿用之前的设置并没有大的变动。
而tablet & below的话，针对padding什么的都做了再次的定制（发现也没有什么好说的）
接下来就是不同的分辨率，1200px几乎不需要变动，而768-979是平板的横屏到桌面的变动，几乎也只需要对grid大小做一下改变即可，具体不同可以见variable这个文件。
然后就是手机和平板了，767px及以下，如果我们没有对这个进行设置 的话，通常我们的网站会在手机上“挤在一起”，这个是十分重要的，因为牵涉到屏幕比较小的手机，正常的字体显示都需要进行重新的定制，我们也就不能不对主流手机的分辨率有个了解。
大多数之前的手机差不多屏幕都在480*320这个级别，所以bootstrap的guide上把手机定位到这个级别，而当samsung带领大屏幕潮流之后，这显然有点不是很适用。iphone5的横屏也达到了568px，当然更大的手机，我们其实可以把他当作迷你平板来处理，并不需要做更多的定制，而iphone5这样的就属于比较尴尬的情况，因为分辨率是16：9，如果不对横竖情况做分别的考虑，横屏的情况将会和平板类似，那么带来的大字体相对于小的屏幕并不是很舒服的体验。
所以我觉得更好的方法是将iphone5的横屏作为max尺寸再单独列出来，这部分的用户总是相对来说更商业价值的，值得更多为之考虑。
具体做法在css中有两个属性orientation: landscape和portrait通过不同的情况的细微定制使得这部分较为高端的用户获得贴心的感受。（不过我很好奇有多少愿意把手机横过来做出了打游戏以外的事情的？根据我的观察似乎不怎么多。）
这里主要就是对span的大小做了一些处理:
[class*="span"],
.uneditable-input[class*="span"],
.row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
@include box-sizing(border-box);
}
使用width: 100%完成自动缩放功能。
总体来说，这个框架为大家考虑到了很多的细节，这里由于我水平较差很难真正的将这里面的精华讲出来，希望下次再聊的时候会有很多新的见解。
网友评论