响应式布局及bootstrap（实例）

说明：
　　这几天公司要求网站实现响应式布局，所以对响应式布局进行了相对全面的了解，并做了几个实例。
　　转载请注明源地址，谢谢^_^，http://www.cnblogs.com/liu-zhen/p/4493679.html
响应式布局介绍
 
响应式布局是什么意思？
     响应式布局可以根据不同的浏览设备（PC端，平板，智能手机等）呈现不同的网页布局，同时减少缩放、平移和滚动。
     适应移动端的大趋势，提高用户体验，减少开发成本。
为什么要使用响应式布局？
     主要是使网页适用于用于移动端设备，屏幕分辨率是出现的最大的兼容性问题。
     可以为不同的设备提供不同的网站，也就是同一网站做普通PC端和移动端两种页面。不论是前期的开发还是后期的维护改版，都非常的麻烦。
响应式布局的缺点？
     兼容代码多，工作量大
设计原则？适合什么样的项目？
     向下兼容，移动优先。
     对于非常复杂的网页布局，不适合进行网页自适应的布局，原因之一是实现成本太高，其次就是复杂页面（例如容商网首页，中国企业集群首页等）也不适合移动端的浏览。
其他的响应式布局的框架？
     Prue框架是Yahoo的一款轻量级的框架，兼容IE7以上，性能好，但是中文文档少，不利于团队开发，没有组件。
     Foundation by ZURB，次于Bootstrap，重量级，362K大小
Bootstrap优势？
     学习成本低
     是目前最流行的自适应框架
     性能非常好，最基础的文件大小只有149.1k
          bootstrap.min.js     35.1k
          bootstrap.min.css   114k
     中文文档完善，还有全套的视频教程
     有许多组件可以选择，如Bootstrap switch，Sco.js，Flat UI等，便于快速开发
     兼容性
  ChromeFirefoxInternet ExplorerOperaSafari
Android  支持  支持 N/A  不支持 N/A
iOS  支持 N/A  不支持  支持
Mac OS X  支持  支持  支持  支持
Windows  支持  支持  支持  支持  不支持
          windows平台，支持IE8，如果不用框架则需要IE9以上支持,而且通过插件Bsie（鄙视IE）可以兼容IE6。
 

响应式布局实例

响应式页面实例地址

     http://xys.laiwanapp.com/bootstrap-1/
 
兼容性问题（分辨率分解-*~768手机,768~992平板,992~1200普通PC,1200~*大屏幕PC）
     
  chrome18 firefox11（firefox3.6） IE7（较少用户） IE8（主流） IE9（代表最新版本） IE6
实例1-微博 无 无（无圆角） 无 无 无 崩溃
实例2-相册 圆角错误 无圆角（无圆角，不支持背景尺寸属性） 无 无 无 崩溃
实例3-博客 圆角错误 无圆角， 进度条无动画（无圆角，进度条无动画） 无 无 无 崩溃
其它            
 
说明
chrome18和firefox都是旧版本的，用户非常少
不支持背景属性可以用position和z-index属性解决
IE6崩溃可以使用针对Bootstrap的插件Bsie解决大部分，但如果不要求对IE6支持，不建议使用，影响性能
下图分别是无圆角，正常圆角，圆角错误，圆角是CSS3属性，所以会出现兼容问题，但IE7以上都支持，已经很好了（w3school说IE9以上才支持，说明使用了css hack）
且官方文档里说明说明了这一点：http://v3.bootcss.com/css/#images-shapes
总结：支持主流浏览器，旧版本的浏览器出现的兼容性问题不大。
　　
 
 
其它需要改进
     
 
移动端测试
兼容性问题（分辨率分解-
1.     *~768手机，1栏
2.     768~992平板，2栏
3.     992~1200普通PC，2栏
4.     1200~*大屏幕PC，3栏
）
 
分辨率dpi ppi 型号 竖 横
2560x1536（手机） 546 MX4 pro 1栏 1栏
720x1280（手机）   华为荣耀3c 1栏 1栏
1200x1920（手机平板）   华为 x1 7.0 1栏 2栏
 800x1280（平板）    toshiba wt8a(win 8.1系统) 2栏 3栏
 1366x768    Acer win8.1   -  -
 
 
另外不知道为什么2560x1536分辨率不能显示三栏而是只显示一栏，不知道dpi和ppi是什么意思，希望知道的大牛请回复，谢谢！^_^

posted on 2015-05-11 09:33  刘振_前端  阅读(17178)  评论(1)  编辑  收藏  举报

导航