【郑州校区】移动web开发笔记day3

一、响应式开发

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

更多

【郑州校区】移动web开发笔记day1

【郑州校区】移动web开发笔记day2

传智播客·黑马程序员郑州校区地址

河南省郑州市 高新区长椿路11号大学科技园（西区）东门8号楼三层

联系电话 0371-56061160/61/62

来校路线  地铁一号线梧桐街站A口出

已收藏~~