首页 > 代码库 > 初识响应式开发
初识响应式开发
1、响应式布局(respond layout):一个网站能够兼容到多个终端。
2、响应式布局原理:使用css3中的Media Query(媒介查询)screen的宽度来指定某个宽度区间的网页布局
超小屏幕(移动设备) |
768px以下 |
小屏设备 |
768px - 992px |
中等屏幕 |
992px-1200px |
宽屏设备 |
1200px-1920px |
3、响应式和移动web的区别
开发模式 |
移动web开发+pc开发 |
响应式开发 |
应用场景 |
一般在已经有pc端的网站,只需单独开发移动端 |
针对新建的网站,一套页面兼容各个终端,灵活 |
开发 |
针对性强,开发效率高 |
兼容各种终端,效率低 |
适配 |
只适配移动端,pad上体验较差 |
可以适配各种终端 |
效率 |
代码简洁,加载快 |
代码相对复杂,加载慢 |
4、移动web和响应式开发都是现在主流的开发模式,使用的都是流式布局,来适配不同的设备,由于终端设备的多样化,新建的站点会优先使用响应式开发。
5、bootstrap的特点、优点以及各个版本的区别
特点:组件简洁大方,代码规范精简,界面自定义性强
优点:
有自己的生态圈,不断的更新迭代
提供了一套简洁、直观、强悍的组件
标配准化的html+css编码规范
让开发更简单,提供了 开发的效率。
注意:虽然界面组件样式已经定义好了,但是扩展性相对较强,也就是说我们还可以自 定义,修改默认样式
***简洁,规范,自定义
各个版本的区别:
2.x.x 停止维护
优点:兼容性好
缺点:代码不够简洁,功能不够完善
3.x.x 目前使用最多
稳定,但是放弃了IE6-IE7。对IE8支持但是界面效果不好。
偏向用于开发响应式布局、移动设备优先的Web项目。
4.x.x 测试阶段
更偏响应式,移动设备。
初识响应式开发