在Appcan開(kāi)發(fā)中，首先要進(jìn)行的就是頁(yè)面布局，然后在這個(gè)頁(yè)面上填充數(shù)據(jù)，加上互動(dòng)元素，最終構(gòu)成完整的應(yīng)用。

因?yàn)閍ppcan是使用HTML5+CSS3+JavaScript技術(shù)來(lái)進(jìn)行開(kāi)發(fā)，所以與普通web開(kāi)發(fā)基本沒(méi)有區(qū)別，理解成webapp的開(kāi)發(fā)或許更好解釋。

iOS、Android系統(tǒng)中已經(jīng)內(nèi)置webkit內(nèi)核，而appcan正是利用webkit來(lái)運(yùn)行我們編寫的頁(yè)面，也就是可以將appcan看作是一個(gè)加強(qiáng)的webkit內(nèi)核，強(qiáng)在它能通過(guò)JS來(lái)控制手機(jī)某些功能，比如打電話、發(fā)短信、定位等等，這是普通webapp所不能達(dá)到的。

HTML頁(yè)面布局

下面就介紹一些在appcan需要注意的問(wèn)題，避免這些問(wèn)題所帶來(lái)的麻煩。

移動(dòng)設(shè)備屏幕一般都比較小，在手機(jī)瀏覽器直接瀏覽網(wǎng)頁(yè)時(shí)，會(huì)對(duì)網(wǎng)頁(yè)進(jìn)行縮放。可是我們開(kāi)發(fā)的是類似原生的應(yīng)用，是不能允許用戶對(duì)網(wǎng)頁(yè)區(qū)域進(jìn)行縮放、調(diào)整大小操作的，那如何來(lái)解決呢？

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

html>

從代碼上可以看到，頁(yè)面采用標(biāo)準(zhǔn)的HTML5頭部聲明。

?標(biāo)簽可有可無(wú)，留空也可。接下來(lái)是聲明頁(yè)面編碼，建議使用UTF8編碼，因?yàn)镴S中ajax與json編碼只能是UTF8，所以最好使用UTF8，避免出現(xiàn)亂碼和程序異常。

現(xiàn)在進(jìn)入重點(diǎn)部分，viewport這個(gè)元屬性，什么是viewport？

我再分別解釋一下content里的內(nèi)容。

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

width=device-width，指定屏幕寬度，device-width設(shè)備屏幕的寬度。

initial-scale=1，初始縮放比例，設(shè)置為1，表示不進(jìn)行任何縮放，顯示原始大小。

user-scalable=no，用戶否否可以手動(dòng)縮放頁(yè)面，設(shè)為no不允許。

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

maximum-scale=1.0，最大縮放比例，設(shè)為1，最大只能縮放到1倍，與上一項(xiàng)配合，保證，頁(yè)面不會(huì)進(jìn)行縮放。

其實(shí)user-scalable為no時(shí)，最后兩項(xiàng)不會(huì)起作用，因?yàn)椴粫?huì)發(fā)生縮放問(wèn)題，圖個(gè)心安，就都放上了。

這樣設(shè)置完成后，就能夠保證，在任何設(shè)備中，網(wǎng)頁(yè)的寬度就是屏幕顯示區(qū)域的寬度，不會(huì)發(fā)生變化，這樣我們進(jìn)行排版里就不會(huì)出現(xiàn)問(wèn)題，這也是與普通web開(kāi)發(fā)比較大的不同之處了。

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

CSS?排版注意問(wèn)題

使用em單位

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

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

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

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

em會(huì)繼承父級(jí)元素的字體大小，記住這點(diǎn)很重要，不至于在使用中出現(xiàn)大小不一致時(shí)摸不到頭緒，影響開(kāi)發(fā)。

文檔有默認(rèn)文字大小，每個(gè)元素中又有字體大小，所以使用em時(shí)，要冷靜的清晰去判斷當(dāng)前位置的文字大小的具體的取值。

em單位會(huì)受到頁(yè)面默認(rèn)字體大小的影響，內(nèi)層元素會(huì)受到外層元素字體大小的影響。

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

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

在項(xiàng)目開(kāi)發(fā)中推薦大家使用em作為單位使用，盡量避免使用px，這樣可以保證在不同設(shè)備上顯示效果基本一致。

背景圖片縮放

說(shuō)完了字體我們?cè)僬f(shuō)另一個(gè)可能需要縮放的元素——背景圖片。

普通的img標(biāo)簽的圖片，可以通過(guò)控制長(zhǎng)寬來(lái)限制縮放，而背景圖片卻不可以，當(dāng)容器大小發(fā)生變化時(shí)，背景圖片依然是原有大小。

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

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

那么在我們的實(shí)例中，幾乎所有用到背景圖的時(shí)候，都加上了這個(gè)屬性，大家可以看看實(shí)例中底部按鈕是如何使用這個(gè)屬性的，按鈕的大小會(huì)根據(jù)屏幕進(jìn)行縮放，同時(shí)按鈕的背景一直都是充滿整體按鈕的。這個(gè)屬性在開(kāi)發(fā)過(guò)程中非常實(shí)用！

在使用了em和-webkit-background-size兩個(gè)屬性后，你就會(huì)發(fā)現(xiàn)在appcan中開(kāi)發(fā)項(xiàng)目是多么快樂(lè)的一件事情啊。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。