適用於不同屏幕尺寸的Android CSS

我有一個簡單的網頁，顯示一些文本和圖像，並試圖找到處理多個屏幕的非複雜方式。適用於不同屏幕尺寸的Android CSS

我已經瀏覽了the docs，我現在看到要做的唯一方法是創建三個獨立的css文件，一個用於低位，一個用於中型，另一個用於高分辨率。不幸的是，其中的每一個必須具有不同的字體大小和每個元素/圖像的尺寸。

考慮到每個hdpi元素應該只是正常尺寸的1.5倍，這似乎相當浪費。有沒有辦法讓Android自動爲我們縮放這些圖片，而使用hdpi版本的圖片而不是mdpi圖片？

我失去了一些東西在這裏？

來源

2011-02-16 cottonBallPaws

您可以嘗試在樣式表中使用媒體查詢。

基本上你說如果視口小於X數量，則啓動（或更改）此樣式，或者如果視口大於Y量，則實現（或更新）此樣式。您可以根據需要擁有儘可能多的可能性，並且不需要額外的樣式，因爲一旦達到特定的寬度，更改就會在您選擇的特定類或ID上實現。

退房這篇文章Responsive Web Design

希望這是哪門子的信息你是後？

來源

2011-02-16 02:37:25 Dan

我們最終走向了一個不需要這個方向的方向，但我會將其標記爲答案，因爲它可能對另一種情況有所幫助。謝謝。 – cottonBallPaws 2011-03-07 23:35:48

我剛纔看到了同樣的問題。那麼，Android似乎根據屏幕大小自動調整Webview的內容（圖像，字體大小等），就像它自動與應用程序圖標一樣。

但是，關於圖標，實際上它也不會自動調整。您仍然必須提供三種不同尺寸的圖標以適應ldpi，mdpi和hdpi分辨率。

這就是爲什麼我們需要提供三個不同的css文件。但是，實際上，如果你讀你前面提到的文檔，你可以寫這三個不同的CSS在一個文件中，就像這樣：

header { 
    background:url(medium-density-image.png); 
} 

@media screen and (-webkit-device-pixel-ratio: 1.5) { 
    /* CSS for high-density screens */ 
    #header { 
     background:url(high-density-image.png); 
    } 
} 

@media screen and (-webkit-device-pixel-ratio: 0.75) { 
    /* CSS for low-density screens */ 
    #header { 
     background:url(low-density-image.png); 
    } 
}

上部是爲MDPI，中間一個是華電國際，和下部是ldpi。因此，您可以輕鬆管理這三種不同屏幕分辨率的一個文件。

來源

2011-08-12 16:18:51

適用於不同屏幕尺寸的Android CSS

回答

相關問題