bootstrap的流式布局

bootstrap是一个前端框架，支持流式布局，当时没太注意什么叫流式布局，只是感觉在PC浏览器上效果不错， 就OK了。最近发现自己的博客在手机和ipad上访问，布局混乱，效果诡异，才感受到流式布局的重要性。

我使用的是bootstrap-3.0.0。折腾了好久，终于体会到前端工程师的不容易了，一个页面要在各种浏览器上访问正常，还要在各种分辨率的终端上访问正常， 太受虐了。

栅格化设计

栅格表如下：

分辨率	超小屏幕 手机(<768px)	小屏幕 平板(≥768px)	中等屏幕 桌面显示器(≥992px)	大屏幕 大桌面显示器(≥1200px)
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-

bootstrap有一些基本原则：

1. .row必须包含在.container中
2. .col-xx-必须包含在.row中
3. 内容应该包含于.col-xx-中
4. .col-xx-加和起来，一行为12，大于12时，会另起一行
5. 通过设置col-xx-的padding值，可以修改格子之间的间隙
6. 通过响应式设计，不同的分辨率下，格子大小会不一样，在大分辨率下.col-md-会被.col-lg-覆盖

一行格式12个，但都设置了padding，如下：

响应式设计

代码举例，当浏览器宽度不在768px和1024px范围内时，例子中的div背景颜色会发生变化：

<style type="text/css">
    .one {
        height:200px;
        background-color:#abc;
    }   
    @media (min-width: 768px) and (max-width: 1024px) {
        .one {
            background-color:#ff0;
        }   
    }
</style>
<div class="one"></div>

当浏览器宽度小到一定程序时，col-xx-会不符合响应条件，从而占据100%宽度。 下面的例子，当分辨率高时，占一行，当分辨率变窄时，占1.5行：

<div class="row"
    <div class="col-md-4 col-xs-6">
    <div class="col-md-4 col-xs-6">
    <div class="col-md-4 col-xs-6">
</div>

bootstrap还提供了导航条在小分辨率下优雅的展现方式，导航条会变成层叠式的一行，点击时，由javascript进行动态展开和收缩。

自适应图片缩放及其他

javascript中判断一个节点是否存在，使用$('xxx').length > 0来判断。

获取浏览器的可视窗口大小，使用如下两个变量：

window.innerWidth
window.innerHeight

获取屏幕的大小，使用如下变量：

screen.width
screen.height

在PC端正常情况下，屏幕大小和可视窗口大小相等，而当缩放时，就会产生一个不等于1的比值，这个比值为：

window.devicePixelRatio

是表示窗口的一个虚拟像素对应了多少个实际设备像素。这在其他终端设备上有很重要的意义，像ipad air的设备像素为2048×1536， 分辨率很高，但屏幕尺寸却并不大，所谓的PPI很高。如果像PC上一样，上面的比值为1的话，会导致文字显示非常小，所以在移动设备上， devicePixelRatio通常为2，即一个虚拟像素，占用两个实际的设备像素。

简单地说，在ipad air上，我们所面对的页面大小为1024x768，即长宽减半。当然，通常在页面的html里，我们加上如下代码， 来限定页面宽度为设备宽度，原始缩放比例为1，而且不允许用户缩放，来保持页面布局不会乱：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

一个页面显示在手机上不出问题时，还需要能够自适应图片大小。为了加快浏览器显示页面，防止页面重刷，通常会指定的长宽：

<img alt="xxx" src="http://xxx.com/xxx.jpg" width="960" height="720" title="xxx" >

这时，当页面显示在手机上，图片会把布局撑爆，这时需要图片的大小能够自适应缩放，复杂的javascript可以实现，如下css代码在非IE浏览器上也可以实现：

display: block;
max-width: 100%;
height: auto;