跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率


         跟燕青一起学Windows8应用开发:用CSS文件妆点你的应用一文中,我们介绍了如何在HTML中引入CSS文件,配置CSSp元素的属性,让HTML显示更加的丰富多彩。本篇博客将继续学习如何使用CSS的属性,在水平方向布局,实现自适应屏幕水平方向分辨率的Metro Style应用。



         HTML中,有两种方法规范化HTML元素的展现,一种是table;另外一种是divtable主要是规范数据的展现方式,它不是一种布局手段(虽然它在一定程度上能够实现布局需求),因此本篇博客将着重介绍div方式的布局。如果博友对table布局特别有偏好,请参考http://www.w3schools.com/html/html_tables.asp中关于table的文章。笔者还是按照以往的思路,从简单的例子讲解如何在水平方向自适应屏幕分辨率,布局的要求如下:屏幕分左右两块:左边一块占用水平方向200个像素点,右边一块占用屏幕剩下的水平空间



在开始布局之前,我们先看看div在默认情况下,它是如何顺序布局的。注意:所有的代码都是在Study Metro App的工程中创建,对于如何参见Study Metro App工程,请参见跟燕青一起学Windows8应用开发:创建HTML5 Metro应用程序一文。



 



default.html中添加两个部门面板:LeftPanelRightPanel,如图1所示。

























1



my.css中添加LeftPanelRightPanelCSS属性配置,如图2所示:







2



点击Local Mechine按钮,运行项目,结果如图3所示:







3



可以看出,在默认情况下div的布局是从上而下依次放置的。



 



如果我们将LeftPanel的宽度设置称200个像素,如图4所示,那么会达到我们的要求吗?







4



不如运行一下吧:-)。图5是我们要的结果吗?







5



LeftPanel在宽度上和我们的一直,但是RightPanel还是被布局在下面一个区域,这个和我们的要求不一致。可能博友会问,用水平方向的分辨率减去200个像素,不就是RightPanel的宽度像素吗?是的,完全正确,但是问题是:你知道它将会运行在哪个分辨率的机器上呢?在程序设计中,答案无法给出!



 



现在我们遇到了两个问题:



1LeftPanelRightPanel不在同一行。



2RightPanel的宽度无法算出。



如果我们能够将上述两个问题一一解决,那么程序就能够按照要求展现出来了。



 



如何解决LeftPanelRightPanel不在同一行的问题呢?



CSS中提供了一个float属性设置,它让你的div飘起来,是不是很酷:-)。它能够解决我们不在同一行的问题,还不赶紧看看CSS代码!在LeftPanelRightPanel中各自添加float:
left
一行,如图6所示。







6



运行一下,解决了吗?







7



WOWCoolLeftPanelRightPanel已经处于同一行中了!



 



还有一个什么问题呢?嗯RightPanel的宽度怎么计算?



Javascript去计算?别老土了,用这个还让CSS情何以堪!



 



回顾一下HTML是如何布局的?先出现的先布局,后出现的后布局,嗯!好主意!思路豁然开朗了!不妨让RightPanel先占满空间,在左边留200个像素空间给LeftPanel,如图8所示。







8



LowPanel的主要任务是填充水平方向的所有空间,RightPanel是填充水平方向剩余的空间,看看它的CSS是如何设置的,如图9所示。RightPanel是叠加在LowPanel之上的非float面板,想一下,为什么LowPanelRightPanel需要float属性呢?对了,它能够解决不同行的问题!那么为什么RightPanel不需要float属性呢?对了,因为我们不希望RightPanel脱离LowPanel的控制,一旦飘了起来,若想固定住的话,需要晴空万里,无风无浪,但是现实是残酷的,难道不是吗:-)LeftPanel需要左边200个像素作为其领地,OKRightPanel通过margin-left:
200px;
很大方的在其左边腾出200个像素。LowPanel很霸道,它因为先发优势,已经霸占了整行的宽度,那么LeftPanel只能通过飘起来,然后向左漂移屏幕的宽度,才能够到达其领地。float:
left; margin-left: -100%;
给了它航线:-),如图9所示。







9



运行一下,看看结果是你要的吗?







10



O(_)o 哈哈!



不过好像高度不太对啊,应用希望是占用完整的高度!不着急,这个好办,看看图11CSS设置吧。







11



 



再运行一下,你看到了什么?







 



Y(^_^)Y



 



简单吗?好像是,有好像不是!没有关系,相信你按照此博客,自己实践一下,那么很多问题就很容易弄明白了,不过为了巩固所学的东西,留两个题目吧?



 



题目1现在需要全屏布局3列,第1列和第3列的宽度都是200个像素,第3列自动填充满全部的剩余宽度。此外,第123列的高度都是屏幕的最大高度。



题目2现在需要全屏布局3列,第1列的宽度是200个像素,第2列的宽度是300个像素,第3列自动填充剩余的宽度。此外,第123列的高度都是屏幕的最大高度。



 



如果你能够非常容易的做完题目12,那么你的水平布局就基本上出师了:-),加油哦!



 



【参考】



1.        
跟燕青一起学Windows8应用开发:创建HTML5 Metro应用程序



2.        
跟燕青一起学Windows8应用开发:安装Visual Studio 2011



3.        
跟燕青一起学Windows8应用开发:安装Windows8操作系统



4.        
跟燕青一起学Windows8应用开发:用CSS文件妆点你的应用



 








有关编译器优化的更完整信息,请参阅优化通知