Rumah >hujung hadapan web >html tutorial >响应式布局及bootstrap(实例)_html/css_WEB-ITnose

响应式布局及bootstrap(实例)_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 11:44:331189semak imbas

说明:

  这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例。

响应式布局介绍

参考: 维基百科, CSS3 @media 查询, Bootstrap中文官网, 鄙视IE, 2014年5个最流行前端框架对比, 自适应网页设计-阮一峰, 响应式网页设计, 响应式布局-百度百科, 响应式网站设计原则, 响应式布局这件小事, 响应式 Web 设计新原则, 什么是响应式布局设计?, 自适应与响应式的区别, Foundation中文网

 

响应式布局是什么意思?

     响应式布局可以根据不同的浏览设备(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等,便于快速开发

      兼容性

Chrome Firefox Internet Explorer Opera Safari Android iOS Mac OS X Windows
 
 支持  支持 N/A  不支持 N/A
 支持 N/A  不支持  支持
 支持  支持  支持  支持
 支持  支持  支持  支持  不支持

          windows平台,支持IE8,如果不用框架则需要IE9以上支持,而且通过插件Bsie(鄙视IE)可以兼容IE6。

 

响应式布局实例

响应式页面实例地址

      http://xys.laiwanapp.com/bootstrap-1/

      http://xys.laiwanapp.com/bootstrap-2/

      http://xys.laiwanapp.com/bootstrap-3/

 

兼容性问题(分辨率分解-*~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)

总结:支持主流浏览器,旧版本的浏览器出现的兼容性问题不大。

  

 

 

其它需要改进

     

 

移动端测试

兼容性问题(分辨率分解-

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
         
         

 

由于现在没有平板电脑,没有办法测试,等测试后会补全。

 

另外不知道为什么2560x1536分辨率不能显示三栏而是只显示一栏,不知道dpi和ppi是什么意思,希望知道的大牛请回复,谢谢!^_^

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn