Flex程式適應不同螢幕尺寸和解析度 滾動條

2021-08-27 09:35:54 字數 3501 閱讀 4870

[size=medium]flashbuilder編譯後自動生成的xx.html裡面定義了瀏覽器如何顯示滾動條。

自動生成的html頁面裡有如下樣式定義:[/size]

為什麼會有兩個滾動條呢?

外層滾動條:

預設情況下html的滾動條是會出現的,只不過是灰色不可用狀態。

內層滾動條:

body的overflow設為auto,當內容超過瀏覽器高度時,body的滾動條就會出現。

所以在這裡,外層的滾動條基本上是沒有意義的,應該手動隱藏,body的設為auto。

解釋:html, body 是為了相容各個瀏覽器。

ie 處於非標準模式時,body以視窗為高度參照,body設定為100%就可以使得頁面和視窗一樣高,body裡面的巢狀div也可以擴充套件到視窗高度,這樣的話可以使布局適應瀏覽器視窗大小。

窗體 》body》div (html ,body 一層滾動條)

但是當處於標準模式時,body以html標籤為高度參照,html標籤以視窗為參照,所以僅僅body 100%,並不能使它的子div100% 佔據整個螢幕,還要使得 html 100%使得 html獲得視窗大小才行。

窗體》html》body》div (html ,body 兩層滾動條 ,html的滾動條從來不會用到)

[b]當flex程式的[color=red]內容高度大於瀏覽器的高度[/color]時,如何使瀏覽器出現滾動條呢?[/b]

案例:假設你的螢幕解析度是1024x768,瀏覽器全屏顯示(此時768即為瀏覽器高度),

panel1 height=500,

panel2 height=400,

因為500+400>768,

[color=red][b]如何讓flex程式友好的支援不同的螢幕尺寸或螢幕解析度?[/b][/color]

友好: 任何時候都能看到所有內容

問題:如果flex程式中的元件既有用百分比表示的,也有用絕對值pixel表示的,那麼當將程式在某一特定解析度除錯好後,比如1600x1200,在另一低解析度下瀏覽比如1024x768,你可能會發現有一部分內容看不到,而且也沒有滾動條(包括瀏覽器滾動條和元件的滾動條)出現,讓你滑動滾動條來瀏覽顯示不下的內容。原因是絕對值定義的元件會保持大小不變,但是當螢幕尺寸變小時,那些用百分比設定的元件可能會沒有足夠剩餘的空間分配,所以顯示不出來。

解決方案建議:

1)flex程式裡的高度和寬度都用百分比表示,這樣會自動縮放,只是當螢幕很小時,元件會變得很小,難以操作。這種方式下瀏覽器的滾動條是不會出現的。

3)禁用瀏覽器的滾動條,給主要的元件和容器設定絕對的寬度和高度。這樣flex容器會自動出現flex元件的滾動條。既可以讓一部分元件縮放變形,又可以讓另一部分元件始終不變形。

[b]如何使flex元件的父容器出現滾動條[/b]

當元件的高度超過父容器的高度時,mx自動會出現滾動條,spark元件需要自己新增scroll元件。

[b]預備知識:[/b]

[b]正確認識html與body 文章一[/b]

標準與非標準模式

standard模式後,定義和解析將更加嚴格,所有定義必須從頂級標籤html開始。

可以理解為傳統非standard模式定義body的用法,standard模式下都必須在html上定義。

高度100%的意義

認為standard模式下定義容器高度100%無效,是錯誤的理論。

如果需要body內的容器有100%高度,必須先定義body高度100%。

html與body的預設值

1. ie6.0環境下html預設有2層border的內嵌效果,ff1.5環境下預設則沒有,

2. ie6.0和ff1.5環境下的body都有一定的margin值

3. ie6.0環境下html預設就是100%高度,body則不是;ff1.5環境下html和body高度預設都不是100%,需要自定義。

一般情況下統一預設的方案:

html body

滾動條的設定

可以這麼認為,非standard模式頁面的預設滾動條是body的,而standard則是html的。

standard模式下的body預設就沒有滾動條,只是html下級的乙個容器而已,這樣定義會看的更清楚:

定位參照

html body

相同的道理,standard模式下當使用position方法的時候,其定位參照肯定是html,而不是非standard模式的body。

根據這個特性很容易把層覆蓋在body上

參考文件:[url]

[b]正確認識html與body 文章二[/b]

1)在firefox、chrome中,doctype為xhtml 1.0 strict下預設html和body的高度是根據內容定,在body下設定乙個高度為height:100%的div並不會充滿整個瀏覽器視窗,必須同時設定html和body的高度為100%方可使該div充滿整個瀏覽器視窗

2)body的overflow預設值:ie6下overflow-y=scroll,overflow-x=auto;firefox、chrome預設均為auto. 因此如果不設定body的overflow,預設狀態下ie6就會顯示不合理的垂直滾動條,設overflow=auto或hidden均可解決

3)各種瀏覽器body的margin都不是0,因此要保證div100%高並且正好充滿整個視窗,須將body的margin設為0

4)手動調整瀏覽器的高度時:

4-1)如果div的overflow=auto:該div會自動保持100%的高度。當視窗縮小到小於div內容的高度時,div就會出現滾動條, 這時不管body的overflow=auto或hidden,均不會出現body的滾動條。

4-2)如果div的overflow=hidden:該div會自動保持100%的高度。firefox、chrome、safari、ie6的行為是一至的,該div內的溢位 部分內容均會隱藏掉,這時不管body的overflow=auto或hidden,也不會出現body的滾動條。

4-3)如果div的overflow=scroll:該div會自動保持100%的高度。firefox、chrome、safari、ie6的行為是一至的,永遠都出現滾動條, 這時不管body的overflow=auto或hidden,均不會出現body的滾動條。

4-4)如果div的overflow沒有設定或設為visible:firefox、chrome、safari的行為是一至的,該div會自動保持100%的高度,div內的溢位部分內 容會溢位顯示,當視窗高度小於div的內容高度時,若body的overflow=auto,就會出現body的滾動條。ie6則比較怪異,在 視窗高度不小於div內容的高度時,該div會自動保持100%的高度;但當視窗高度小於div內容的高度時,該div不會自動保持 100%的高度,而是等於內容的高度不再變,內容不會出現溢位效果,此時若body的overflow=auto,就會出現body的滾動條。

[b]總結:html和body的高度設為100%,body設margin=0、overflow=hidden,div設overflow=auto,各瀏覽器表現一至,效果最佳[/b][/size]

android 開發適應不同螢幕尺寸應用

1.px pixels 畫素 螢幕上的點 與密度相關。密度大了,單位面積上的px會比較多。2.dip或dp 與密度無關的畫素 這個和裝置硬體有關,為了支援wvga hvga和qvga 5進製空間 推薦使用這個。一種基於螢幕密度的抽象單位。設定一些view的寬高可以用這個,一般情況下,在不同解析度,都...

imageview 自適應各種螢幕尺寸

最簡單的方法 加上這個屬性 scaletype fitxy 在做的好一點,根據px轉換成dip 設定好對應屬性 android layout width 40dip android layout height 40dip 被拉伸的時候顯示會好一點。最好的辦法,還是設計好乙個,這個內容在中心內容大小可...

android 介面自適應螢幕尺寸相關

android 介面如何自適應螢幕尺寸呢?1 獲取螢幕尺寸 01.display display getwindowmanager getdefaultdisplay 02.int width display.getwidth 03.int height display.getheight 01.d...