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

Question

我有一個簡單的網頁，其中顯示了一些文本和圖像，並試圖找到一種處理多個屏幕的簡單方法。

我已經瀏覽了文檔 ，現在唯一可以看到的方法是必須創建三個單獨的CSS文件，一個為低檔，一個為中檔，一個為高分辨率。 不幸的是，每個元素/圖像必須具有不同的字體大小和尺寸。

考慮到每個hdpi元素的大小應該恰好是普通元素的1.5倍，這似乎很浪費。 有沒有辦法讓Android在使用hdpi版本的圖像而不是mdpi版本的圖像時自動為我們縮放比例？

我在這里想念什么嗎？

Answer 1

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

基本上，您說的是，如果視口小於X數量，則啟動（或更改）此樣式；如果視口大於Y數量，則實施（或更新）此樣式。 您可以根據需要選擇多種可能性，並且不需要其他樣式，因為更改是在達到特定寬度后在您選擇的特定類或ID上實現的。

查看有關響應式Web設計的本文

希望這是您所需要的信息？

Answer 2

我只是看了同樣的問題。 好吧，似乎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，中間用於hdpi，下部用於ldpi。 因此，您可以輕松地為這三種不同的屏幕分辨率管理一個文件。