【济南校区】前端与移动开发就业班笔记移动web:day04

什么是响应式开发

在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。

通常的做法是针对移动端单独做一套特定的版本。

但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。

那么Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。

响应式开发的原理

CSS3中的Media Query（媒介查询）

通过查询screen的宽度来指定某个宽度区间的网页布局。

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

小屏设备    768px-992px

中等屏幕    992px-1200px

宽屏设备    1200px以上

响应式开发的前景

现在的移动设备屏幕越来越大。

越来越多的设计师也采用了这种设计。

在新建站的一些网站现在普遍采用的响应式开发。

那么在前端开发当中也是一项必备的技能。

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


Bootstrap框架
简介作者：Twitter 公司两位前端工程师（mark otto && jacobthornton）在2011发起开发完成的。
官方网站：http://getbootstarp.com/
中文网站：中文官网  http://www.bootcss.com
特点：


为什么选择bootstrap优点：
有自己的生态圈，不断的更新迭代。提供了一套简洁、直观、强悍的组件。标配准化的html+css编码规范。让开发更简单，提高了开发的效率。

注意：虽然界面组件样式已经定义好了，但是扩展性相对较强，也就是说我们还可以自定义，修改默认样式。

版本

2.x.x 停止维护

    优点：兼容性好

    缺点：代码不够简洁，功能不够完善。

3.x.x 目前使用最多

     稳定，但是放弃了IE6-IE7。对IE8支持但是界面效果不好。

     偏向用于开发响应式布局、移动设备优先的WEB 项目。

4.x.x 测试阶段

     更偏响应式，移动设备，代码更精简。

Map文件

通常使用css和js 压缩的过程。

如果出错  显示浏览会提示那一行出错。

Map就是提供了记录代码位置的文件

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830