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。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com