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


         跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率一文中,笔者主要讲述了如何通过HTML+CSS的使用,自动根据屏幕的水平分辨率进行宽度的自适应调整。本篇博客将着重讲述如何使用HTML+CSS自适应垂直方向分辨率,通过水平和垂直方向的综合使用,Win8应用程序能够非常容易地自适应不同设备分辨率变化的挑战。



         阅读跟燕青一起学Windows8应用开发:使用HTML+CSS自适应水平方向分辨率后,读者已经知道:在默认情况下,DIV是自动扩展其宽度以适合屏幕的实际宽度,那么在垂直方向,DIV的行为方式是否和水平一致呢?为了搞清楚这个问题,不妨我们先做个实验看看吧:-)



 



Study Metro App项目中,我们添加两个DIVTopPanelBottomPanel),如图1所示。

























1



我们在CSS文件中对TopPanelBottomPanel进行相关的属性设置:两者都自动填充屏幕的宽度,TopPanel有固定的200个像素的高度,BottomPanel没有制定高度,笔者希望它能够自动填充剩余的屏幕高度空间。此外,为了便于观察TopPanelBottomPanel所占用的屏幕空间,我们分别将其背景设为绿色和蓝色,如图2所示。







2



运行一下,图3是我们预想的结果吗?







3



很遗憾,BottomPanel仅仅占用了剩余高度的一部分,而非是我们预想的将它填满。



 



那么如何才能够实现我们的设计预想呢?在DIV出现之前,我们一般使用table来完成此布局,那么DIV中是否也有类似的属性来实现类是于table的功能呢?非常的幸运,在CSS属性中displaytable能够对展示做出非常好的调整。因为displaytable是设置DIV的父Panel,所以需要在TopPanelBottomPanel下布局一个父DIV,本例中将其称为MainPanel。图4展示出如何定义HTMLMainPanelTopPanelBottomPanel的布局关系。







4



CSS文件中属性的设置是关键,那么如何搞定他们呢?图5给出了一个很好的样例:-)







5



MainPaneltable展示,TopPanelBottomPanel都是table-row的展示。



 



你们是不是迫不及待的想看看结果呢?没错,我也有这种心情,让我们看看运行结果图6吧!







6



CoolBottomPanel非常轻松的将屏幕的剩余部分填充满,真是太棒了!



 



本篇博客的样例虽然非常简单,但是给出的方法将是非常有价值的,难道不是吗?为了测试一下博友是否真的懂它了,不妨做两个题目吧:-)



 



题目1布局要求:BottomPanel的高度为200个像素,TopPanel为自动填充剩余的屏幕高度,HTML+CSS应该如何设置?



 



题目2布局要求:有三个Panel,分为上中下。上和下分别占用100个像素和200个像素,中间部分自动填充剩余的高度空间,HTML+CSS应该如何设置?



 



是不是非常的容易?如果是,那么恭喜你!你已经完全“懂我”了:-)



 



【参考】



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



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



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



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



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



 








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