响应式布局及bootstrap（实例）

说明：

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

转载请注明源地址，谢谢^_^，http://www.cnblogs.com/liu-zhen/p/4493679.html

响应式布局介绍

参考：维基百科，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 支持支持 N/A 不支持 N/A

iOS 支持 N/A 不支持支持

Mac OS X 支持支持支持支持

Windows 支持支持支持支持不支持

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

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）

且官方文档里说明说明了这一点：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是什么意思，希望知道的大牛请回复，谢谢！^_^

转载于:https://www.cnblogs.com/liu-zhen/p/4493679.html

响应式布局及bootstrap（实例）相关推荐

html响应式布局教程,css3 media 响应式布局的简单实例
html> /* 小于200px*/ @media (min-width:200px ) and (max-width:500px ) { #p{ background: red; } } ...
响应式布局与Bootstrap框架
响应式布局与Bootstrap框架 1.rem基础 rem(root em)是一个相对单位,类似em,em是父元素字体大小不同的是rem的基准是相对于html元素的字体大小 rem的优点就是可以通过 ...
CSS实现固定宽高比响应式布局（附实例分析）
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/ 在日常开发过程中,有一些前端业务场景可能需要让元素在尺寸变化的同时,保证宽高比不变,所以在此记录 ...
web响应式布局与BootStrap框架
目录什么是响应式网页布局媒体查询什么是媒体查询? 媒体类型(mediatype) 关键字媒体特性(media feature) 引入方式 BootStrap 简介使用步骤栅格系统组件 J ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
前端移动Web第四天案例：阿里百秀首页-响应式布局（bootstrap框架）
阿里百秀首页案例技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图: 本设计图采用 1280px 设计尺寸 1. 页面布局分析 2. 屏幕划分分析 ① 屏幕缩放发现中 ...
html怎么做成响应式的,怎么用html5完成响应式布局？
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...
响应式布局-bootstap-阿里百秀案例
目录响应式开发原原理响应式布局容器 Bootstrap前端开发框架 Bootstrap简介 Bootstrap使用使用四部曲: bootstrap布局容器 bootstrap栅格系统 6.列排序 ...
16-响应式布局（bootstrap框架）
响应式布局(bootstrap框架) 前言响应式开发原理:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的设备划分设计尺寸尺寸超小屏幕(手机) 100% <7 ...

响应式布局及bootstrap（实例）

响应式布局及bootstrap（实例）相关推荐

最新文章

热门文章