移动web开发---第三天

1、响应式开发
一、响应式布局， 就是一个网站可以兼容多个终端。

二、响应式开发的原理

CSS3中的Media Query（媒介查询，and以后必定要加空格@media screen and (min-width: 768px) and (max-width: 992px) {}; 经过查询screen的宽度来指定某个宽度区间的网页布局。

超小屏幕（移动设备）768px如下

小屏设备    768px-992px

中等屏幕    992px-1200px

大屏设备    1200px以上

三、响应式开发和移动web开发的区别

bootStrap

bootStrap框架----当前最流行的前端UI框架（有预制界面组件）

特色：组件简洁大方，代码规范精简，界面自定义性强

优势：

有本身的生态圈，不断的更新迭代

提供了一套简洁、直观、强悍的组件

标配准化的html+css编码规范

让开发更简单，提升了开发的效率。

三、布局容器

.container固定宽度而且支持响应式布局的容器

默认margin:55px; padding:15px;

.container-fluid类用于 100% 宽度，占据所有视口（viewport）的容器。

四、删格系统

行：row 经过自身的拉伸来填充父容器的内边距

删格参数：