初识响应式开发

Posted 2020-09-05 浅陌初心

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 测试阶段
       更偏响应式，移动设备。