移动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开发的区别

bootStrap

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

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

优点：

有自己的生态圈，不断的更新迭代

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

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

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

3、布局容器

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

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

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

4、删格系统

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

删格参数：

标签：web,768px,容器,992px,第三天,响应,开发,宽度,移动
来源： https://blog.51cto.com/14473726/2444501