移动web开发

一、响应式开发
1、响应式布局，    就是一个网站能够兼容多个终端。
2、响应式开发的原理
CSS3中的Media Query（媒介查询，and之后一定要加空格@media screen and (min-width: 768px) and (max-width: 992px) {}; 通过查询screen的宽度来指定某个宽度区间的网页布局。
超小屏幕（移动设备）768px以下
小屏设备    768px-992px
中等屏幕    992px-1200px
大屏设备    1200px以上
3、响应式开发和移动web开发的区别
开发方式    移动web开发+PC开发    响应式开发
应用场景    一般在已经有PC段的网站，开发移动站的时候，只需单独开发移动端 针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活
开发  针对性强，开发效率高  兼容各种终端，效率低
适配  只是陪移动设备，pad上体验相对较差  可以适配各种终端
效率  代码简洁，加载快    代码相对复杂，加载慢

bootStrap
bootStrap框架----当前最流行的前端UI框架（有预制界面组件）
特点：组件简洁大方，代码规范精简，界面自定义性强
优点：
有自己的生态圈，不断的更新迭代
提供了一套简洁、直观、强悍的组件
标配准化的html+css编码规范
让开发更简单，提高了开发的效率。
3、布局容器
.container固定宽度并且支持响应式布局的容器
默认margin:55px; padding:15px;
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
4、删格系统
行：row 通过自身的拉伸来填充父容器的内边距
删格参数：
超小屏幕 手机(<768px)     小屏幕 平板(≥768px)  中等屏幕(≥992px)    大屏幕 (≥1200px)
栅格系统行为  总是水平排列  开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container最大宽度  None（自动）    750px   970px   1170px
类前缀 .col-xs-   .col-sm-   .col-md-   .col-lg-
列数(column)  12
可嵌套 是
偏移（Offsets）  .col-xs-offset-
可见、隐藏    .visible-xs-   .hidden-xs