Bootstrap

响应式

1、解决手机分辨率越来越高，网页字体边框变粗问题

• 判断是否是视网膜屏

• 将当前页面的scale换成0.5/0.3等

• 动态生成相应的meta标签，插入到html文件头部

2、参数含义

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）

• height：和 width 相对应，指定高度

• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例

• maximum-scale：允许用户缩放到的最大比例

• minimum-scale：允许用户缩放到的最小比例

• user-scalable： yes或no，允许或禁止用户缩放网页

3、栅格布局

@media screen and (min-width: *px) and (max-width: *px) {
    /*此处写当宽度发生改变后重新调整的样式*/
}

bootstrap中的响应式开发原理是栅格布局

• col-lg-3：表示在大屏幕元素宽度大小为屏幕的3/12，即1/4

• col-md-4：表示在中等屏幕元素宽度大小为屏幕的1/3

• col-sm-6：表示在小屏幕元素宽度大小为屏幕的1/2

• col-xs-6：表示在超小屏幕元素宽度大小为屏幕的1/2

用法：直接再div里的class中填写即可<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div>
（本文参考慕课网）