Phonegap移動開發:佈局總結(二) 字體

首先在開頭再次強調Phonegap移動開發的口號:Once code, run everywhere.

 

移動開發的界面佈局中,字體的設計容易遇到兩大難題.

1.字體須要根據不一樣的設備尺寸進行調整.

2.移動設備的尺寸較小,字體的變化會很容易影響到佈局.

 

對於這兩個問題,一般的解決方案爲:

1.利用響應式佈局根據設備屏幕分辨率在不一樣的css中設定特定的font-size(pt或者px)

2.使用百分比來設置字體的font-size(em),而後根據基準字體大小來自動調節全部字體的固定大小.

 

簡單介紹一下:

方案一,

響應佈局簡單的說,就是使用css3 的@media過濾屏幕尺寸,根據不一樣的屏幕尺寸爲字體設定相應的固定大小. 其缺點在於@media的邊界值大多數都是根據一些較爲流行的設備(好比IPhone,IPad,Samsung S3等)來進行設定,可是這些邊界值實際上並不能以偏概全的準確表明字體在全部尺寸上的體驗.移動設備的屏幕分辨率和大小是多種多樣的,雖然大多數會和流行的設備的屏幕尺寸相仿,可是當開發完成的App放到一些特定範圍內後,固定的font-size很容易產生未知的佈局問題(好比尺寸太大形成的換行或者超出容器邊界等),從而形成與App總體界面不相符的糟糕體驗.這顯然違反了咱們用Html5+css3的終極目標:Once code, run everywhere.

 

方案二,

這曾經被筆者認爲是在移動中佈局及設置字體的一個捷徑.

一般分爲兩步:(1)在body中設置一個基準字體大小,好比body{font-size:16px;}或者body{font-size:*%;} (2)界面元素中字體的font-size所有設置爲em(即相對於基準尺寸的比例,對em不熟悉的同窗能夠google一下).

其實這裏,咱們仍是會借用到響應式佈局的@media, 根據邊界值設定基準字體大小(邊界值設定能夠參考方案一). 與方案一所不一樣的是,其餘全部的字體都是一個參照基準值的比例,不用設置特定的固定大小.當設備發生變化時,全部的字體根據設備的分辨率過濾出的基準值和設定的比例作響應的調整.

可是現實每每是:你看到一個美女,初步認識的時候以爲她簡直就是女神. 但當她成爲你的女友後,面對各類各樣的考驗後你纔會發現,現實都是很骨感的.

我曾經在一個Phonegap的項目中,大面積的使用em來設置字體和元素比例,固然App在面對不一樣的設備時,尺寸會相應變化.

可是有一個比較現實的問題是,如今不少用戶都會用到平板,其尺寸較大,若是尺寸越大App的元素越大,豈不是要亂套?

你也許會說,"我爲@media設置一個固定上限邊界值,好比最大的分辨率屏幕寬度是1280,超過1280的基準都設爲62.5%(這裏套一句題外話,62.5%是根據em進行字體設定的一個黃金比例.當你在body中設置font-size爲62.5%時,在須要設置em時,能夠直接按照原型切圖時,psd上的原始字體大小除以10來設定. 好比psd中某個元素的字體時17px,那麼在css中的em就能夠設置爲1.7em)". 

你的想法是正確的,可是客戶的想法是難以捉摸的,他可能會說"我須要App裏面的按鈕和Label大小是一個固定的高度". 這個時候使用em進行字體設置幾乎會對不少地方產生較大的影響. 試想一個按鈕,邊框是一個固定大小的,可是內部字體的尺寸卻在根據不一樣設備變化,這顯然是比較糟糕的.

這個時候,咱們仍是會須要固定的字體大小(px,pt)來充當救世主.

 

筆者的方案最終回到了最原始的起點:

(1)爲元素設定固定的高度.

(2)爲字體設定固定值.

 

可是這兩點有兩個原則做爲鋪墊

(1)佈局的時候,間隔儘可能使用百分比.

這樣雖然會改變元素間距,可是總體佈局不至於出現錯位等比較難以接受的狀況.

(2)在設置固定大小時,以屏幕尺寸相對較小的設備進行測試.

字體每每會對屏幕較小的移動設備產生影響. 另外,大多數人在使用平板時,實際上大多數的操做都是與手機等小屏幕設備一致的,只是滑動的空間和可見度更大.

當一個App的元素間隔產生變化,可是各個元素的大小在不一樣設備上顯示一致,其實是用戶體驗最好,最容易接受的.

 

寫到這裏,你們可能對在移動開發中設置字體有了必定理解,歡迎各位同窗提出想法,交流討論.