响应式布局：pc和移动共用一套，页面结构会随着屏幕的变化而变化
开发原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备划分情况：
①小于768的为超小屏幕（手机）
②768~992之间的为小屏设备（平板)
③992~1200的中等屏幕（桌面显示器）
④大于1200的宽屏设备（大桌面显示器）
响应式布局容器
①手机小于768px 设置宽度700%；
②平板大于768px 宽度750px;
③桌面显示器大于992px 宽度970px
④大屏幕 1200px 宽度1170px;
bootstrap
使用步骤：1. 创建文件夹结构 2. 创建 html 骨架结构 3. 引入相关样式文件 4. 书写内容
栅格系统：
按照不同屏幕划分为1~12 等份
行（row） 可以去除父容器作用15px的边距
.col-xs-超小； .col-sm-小； .col-md-中等； .col-lg-大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class="col-md-4 col-sm-6"
列排序：左侧 .col-md-push-数值
右侧 .col-md-pull-数值
列偏移： .col-md-offset-数值
响应式工具 隐藏和显示
.hidden-xs 在超小屏幕下隐藏
.visible-xs 在朝下屏幕下显示 |
|
收藏
淘帖
踩
