Appcan学习手记（2）——UI框架及布局定位

        作为一个.NET开发人员，一直对DIV+CSS有抵触。最开始用asp.net开发，前台页面布局的工作都是扔给美工来负责。后来自己创业前端用Extjs开发，也不用对布局花费太多的精力。所以一直对DIV+CSS不熟悉，导致结果就是胆怯了。所以刚开始学Appcan的时候就行跳过有关布局的东西。但是在实际开发过程中发现不了解基本的UI框架真是寸步难行。硬着头皮看了几遍下官方的“UI基础框架文档”，竟然大部分没有看懂！

     最终随着开发逐步增多，才了解了其中几个最重要的东西，也是Appcan新手最容易迷惑的地方！

1、弹性盒子：这个是手机比较常用的布局。与传统“流式布局”最大区别是，“弹性盒子模型是，在指定大小的父容器里来为子元素分配空间”。父容器理解为手机屏幕的大小，子元素在怎么大也不能查出父容器的窗口大小。这个一般在浮动窗口里常用。

2、ub   、ub-con 、ub-f等属性：官方文档花了很大篇幅来讲这几个属性。最开始我看到云里雾里，网上差居然查不到。最后才知道原来“ub”这些属性并不属于CSS的属性，而是Appcan自己封装的，目的就是让你开发的时候稍微简单一些！就如ub-f1其实就是

.ub-f1
{
position:relative;
-webkit-box-flex: 1; 
box-flex: 1;
}

这些css封装你可以在项目的ui-box.css里找得到。

所以弄懂官方的几个封装的属性，可以加快开发进度！

3、由于手机屏幕不同分辨率不同，所以如果定义字体大小用px会导致在不同手机上大小不同。所以在Appcan定义大小时em。例如在320x480分辨率的手机上，采用16px大小字体作为参考量。在480x800分辨率的终端上，采用24px大小字体作 为参考量。一切元素的大小都是以参考量的相对比值来定义。在CSS里面对应的是em。那么在320x480分辨率下 1em=16px，在480x800分辨率下1em=24px。