在Appcan開發中，首先要進行的就是頁面布局，然后在這個頁面上填充數據，加上互動元素，最終構成完整的應用。

因為appcan是使用HTML5+CSS3+JavaScript技術來進行開發，所以與普通web開發基本沒有區別，理解成webapp的開發或許更好解釋。

iOS、Android系統中已經內置webkit內核，而appcan正是利用webkit來運行我們編寫的頁面，也就是可以將appcan看作是一個加強的webkit內核，強在它能通過JS來控制手機某些功能，比如打電話、發短信、定位等等，這是普通webapp所不能達到的。

HTML頁面布局

下面就介紹一些在appcan需要注意的問題，避免這些問題所帶來的麻煩。

移動設備屏幕一般都比較小，在手機瀏覽器直接瀏覽網頁時，會對網頁進行縮放?？墒俏覀冮_發的是類似原生的應用，是不能允許用戶對網頁區域進行縮放、調整大小操作的，那如何來解決呢？

我們可以在appcan里新建一個叫index.html的頁面模板，看它頭部代碼：

html>

從代碼上可以看到，頁面采用標準的HTML5頭部聲明。

?標簽可有可無，留空也可。接下來是聲明頁面編碼，建議使用UTF8編碼，因為JS中ajax與json編碼只能是UTF8，所以最好使用UTF8，避免出現亂碼和程序異常。

現在進入重點部分，viewport這個元屬性，什么是viewport？

我再分別解釋一下content里的內容。

target-densitydpi=device-dpi，指定屏幕像素密度DPI，device-dpi?為設備原本的DPI值，不會有任何縮放。

width=device-width，指定屏幕寬度，device-width設備屏幕的寬度。

initial-scale=1，初始縮放比例，設置為1，表示不進行任何縮放，顯示原始大小。

user-scalable=no，用戶否否可以手動縮放頁面，設為no不允許。

minimum-scale=1.0，最小縮放比例，設為1，最小只能縮放到1倍。

maximum-scale=1.0，最大縮放比例，設為1，最大只能縮放到1倍，與上一項配合，保證，頁面不會進行縮放。

其實user-scalable為no時，最后兩項不會起作用，因為不會發生縮放問題，圖個心安，就都放上了。

這樣設置完成后，就能夠保證，在任何設備中，網頁的寬度就是屏幕顯示區域的寬度，不會發生變化，這樣我們進行排版里就不會出現問題，這也是與普通web開發比較大的不同之處了。

ui-media.css?這個文件就是官方默認生成的CSS文件，文件大概的用途就是在不同分辨屏下設置相對合適的字體大小，從9px到32px不等，iphone為16px,?ipad1為20px，800*480的android機基本為24px。正是因為這個文件，所以才使得在不同大小的屏幕上的字體看起來不會有太大的比例失調問題，比如在ipad上字體不會顯示得太小，iphone上不會太大。更重要的是文字的大小會直接影響以后CSS長度單位的設置！

CSS?排版注意問題

使用em單位

至于ui-base.css文件，是整個項目中的CSS樣式文件，所有用到的樣式都這個文件中，編寫與普通web網頁中的編寫是一致的，而且支持CSS3屬性，合理的使用CSS3屬性會提高性能和效率。

無論是手機上還是電腦上，CSS的兼容性問題一直存在，appcan中也不例外，雖然支持CSS3但是各平臺支持都有差異，需要酌情使用。

對于appcan，最頭疼的就是不同分辨率的顯示效果，實例中針對不同大小的屏幕都使用同一種布局方案，這也是大部分應用采用的方案。那么如何使得這些設備中顯示上的效果基本一致呢？

大家考慮一下，ui-media.css使得屏幕越大的設備字體就越大，反之亦然。那么有沒有能夠讓布局自適應的方法？在CSS中有em這么個單位，它不是一個精確的單位，而是一個相對的單位，相對誰呢？相對的就是字體大小，正是上面講到的字體大小直接影響CSS布局的原因。

em會繼承父級元素的字體大小，記住這點很重要，不至于在使用中出現大小不一致時摸不到頭緒，影響開發。

文檔有默認文字大小，每個元素中又有字體大小，所以使用em時，要冷靜的清晰去判斷當前位置的文字大小的具體的取值。

em單位會受到頁面默認字體大小的影響，內層元素會受到外層元素字體大小的影響。

為什么要使用em而不去使用px呢？em是相對大小，px是固定大小，em在不同分辨率中會顯示出不同大小，而px始終是一個大小！

大家可以去看看ui-base.css與官方提供的UI的CSS文件中，大量的在使用em作為單位，而px單位出現幾乎為零。

在項目開發中推薦大家使用em作為單位使用，盡量避免使用px，這樣可以保證在不同設備上顯示效果基本一致。

背景圖片縮放

說完了字體我們再說另一個可能需要縮放的元素——背景圖片。

普通的img標簽的圖片，可以通過控制長寬來限制縮放，而背景圖片卻不可以，當容器大小發生變化時，背景圖片依然是原有大小。

在CSS3中同樣存在一個可以幫助我們來控制背景圖片按容器大小進行縮放的屬性——-webkit-background-size:100%?100%;

至于這個屬性的使用方法，我就不過多介紹了，可以自己谷歌。只要在需要背景圖片縮放的元素上設置此屬性即可。

那么在我們的實例中，幾乎所有用到背景圖的時候，都加上了這個屬性，大家可以看看實例中底部按鈕是如何使用這個屬性的，按鈕的大小會根據屏幕進行縮放，同時按鈕的背景一直都是充滿整體按鈕的。這個屬性在開發過程中非常實用！

在使用了em和-webkit-background-size兩個屬性后，你就會發現在appcan中開發項目是多么快樂的一件事情啊。

總結

以上是生活随笔為你收集整理的appcan外部网页css,Appcan开发之页面布局与CSS排版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。