web前端开发框架12布局框架.ppt

前端布局框架分类静态布局响应式布局静态布局960GS /Blueprint CSSGrid /960GS960这里是网页的横向尺寸,960px,为什么是960这个数字,而不是1000或者900?960可以分解为2的6次方乘以3和5,这使得960可以分割成以下宽度的整数倍:2,3,4,5,6,8,10,12,15,16,20,24,30,32,40,48,60,64,80,96,120,160,192,240,320,480目前绝大多数显示器都支持1024x768及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度,可以看出960是非常合适的。这样,在目前主流显示器下,960就成为网页栅格系统中的最佳宽度了。响应式布局LessFramework /foundation http://foundation./GoldenGridSystem /SimpleGrid ,而最完美的情况呐,就是为笔记本、iPhone、iPad、黑莓、Kindle...各自打造一款。但是说不定哪天又出来iwatch能够浏览网页。又得开发一个新版本,这种永无止境的开发,让未婚程序员哪有时间去约会,会残害终身。终于有这么一天,一位前端开发者想到了响应式布局,解决了这个问题,于是很快就和一小妹结婚了。响应式Web设计的概念在“响应式建筑(responsivearchitecture)”——提出,物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产“智能玻璃”:当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。将这个思路延伸到Web设计的领域,我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案?和响应式建筑相似,Web设计同样应该做到根据不同设备环境自动响应及调整。显然,我们无法也无需使用运动传感器或是机器人技术,响应式Web设计更多需要的是抽象思维。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式。响应式布局-调整分辨率要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向),我们就必须考虑N种屏幕尺寸规格。诚然,我们可以将这些规格划分为几个大类,然后为每一类做一种方案,确保该方案至少在本组中尽量具有弹性。但即使这样,结果也将是无比焦虑的,谁知道某类设备在5年之后的占有率是多少?而且很多用户甚至不去将浏览器的窗口最大化;类似这样的变数,我们还要考虑多少?部分解决方案:一切弹性化所谓弹性,也只是体现在竖排布局以及字号等方面;图片始终可以轻易的破坏页面结构,而且即使是哪些弹性的元素结构,在很极端的情况下,仍会破坏布局。响应式布局-调整分辨率响应式布局-调整分辨率从技术角度讲,虽然听上去这些都简单可行,但是实现并不是那么简单。举个例子,仔细观察下面的图片,怎么更好的去实现弹性效果---如果我们将浏览器窗口不断调小,会发现图片的文字部分始终会保持同比缩小,保证其完整可读。