分享人:朱士峰
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.布局示例
6.扩展思考
7.参考文献
8.更多讨论
起初,网页设计者都会涉及固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时本来电脑就少, 即使有变化也是800,850,870,880,比如开源中国的网页就是固定宽度为998来定制的,至于为啥是998,我也不知道。。。。。
后来随着显示器越来越多,以及笔记本的普及,这种方式的页面出现了问题,于是出现了一种新的布局方式————宽度自适应布局。 我们平常讨论的宽度自适应布局,大多指的就是宽度自适应布局。这种布局出现了两种流派:百分比宽度布局 和 流式布局。
百分比宽度布局是:宽度使用百分比,文字使用em,现在也很多使用rem了,也就是所谓的高清方案。 流式布局是:以Google为代表的方法,渐进增强。不过已经停止了。
大家熟知的Google发布了Android,于是互联网大战从PC打到了手机上,还有HTML5标准的发布。 手机屏幕虽然变小了,却添加了更丰富的功能,还记得以前用诺基亚上QQ的事情吗?我们访问的都是3g.qq.com,当时使用的是普遍都是Android2.0,访问wap.qq.com,再后来的智能手机都是访问的m.qq.com. 不禁有人问,「真的要给每一个手机分别设计一个网页吗?」,「真的要给电脑PC和手机分别设计不同的网页吗?」,解决办法当然有很多种。
不过,最终的解决方案胜出者是响应式布局。响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。Google第一次完成了从先驱到烈士。 下面再从直观一点的来看,响应式布局和自适应的区别: 首先两种的方式的解决问题是不一样的。 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。手机的屏幕比较小,宽度通常在600像素以下,pc的像素一般在1000像素以上,部分配置高的笔记本在2000像素以上的也有,同样的页面要显示在不同的设备上面,还要呈现出满意的效果,不是一件容易的事情。 因此就有人想出了一个办法,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕的宽度,自动调节网页的内容大小,但是无论怎么样子,他们的主体的内容和布局是没有变化的。
很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。 响应式的概念应该是覆盖了自适应,但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式,以及布局。
响应式布局的一些技术点纪录:
(1)允许网页的宽度自动的调整
(2)尽量少使用绝对的宽度,多点百分比
(3)相对大小的字体:字体不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个不限制与字体,别的属性也可以这么设置
(4)流式布局,float等float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
媒体查询的兼容性如何?
因为响应式布局兼容性并不好,在IE8以下的浏览器中无法实现效果。大家宁愿采用1000PX以下宽度的页面
现针对IE8以下的兼容性,又再次引用了另外一个插件: [if lte IE 8]> respond.js大家可以在网上搜索到。应用后,在IE8以下的浏览器,如果判断了是窄屏幕,则会加载调整的样式。当然,有一个瑕疵,由于是JS载入后判断,所以可能会有延迟,稍微闪屏。不过这都是可以接受。
参考一: 响应式
感谢大家观看
BY :黄志波|罗宇|冯馨雨|隋鑫|徐炜