在獨立於設備的單元中定義css寬度/高度？

我有一個div，我試圖找出如何讓它佔用相同數量的屏幕空間，無論設備顯示密度如何。在獨立於設備的單元中定義css寬度/高度？

例如，假設我有兩個每個5英寸寬的設備。第一個顯示器的器件像素比= 1，第二個顯示器的器件 - 像素比= 2。

Device 1: 5 inches wide, device-pixel-ratio=1 
Device 2: 5 inches wide, device-pixel-ratio=2

所以第二個設備的像素數量是同一空間的兩倍。

我的div風格：

.myDivStyle { 
    width: 100px; 
    height: 50px; 
}

如果我理解正確，設備2會出現在一半的寬度/高度呈現DIV作爲設備1.

如果是這樣的話，是有一種在獨立於設備的單元中定義寬度/高度的方法？或者在我們檢查device-pixel-ratio屬性後，是否需要在頁面加載等時手動縮放所有樣式？

謝謝

來源

2012-11-27 user291701

你有沒有解決這個問題？ –

對於任何人在這個問題上磕磕絆絆，仍然在想：儘管硬件像素密度不同，但div應該佔據相同的物理空間。有關該主題的更多信息，請參閱[像素不是像素不是像素]（http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html）。 – ACJ

像你需要用百分比來代替像素上班這聽起來多。所以它會使用你的屏幕

.myDivStyle { 
    width: 50%; 
    height: 25%; 
}

的「百分比」量這將解決問題的像素ammount的。如果你使用Iphone和Android的屏幕，這將解決這個問題，因爲它們使用兩種完全不同的分辨率。舉例來說，我相信Iphone使用320的東西，而我自己的三星Galaxy使用我認爲480的東西。（不知道真值）

來源

2012-11-27 15:06:56 Dorvalla

使用em單元重新定義你的css大小會很好。

此參考文獻中的一些很好的鏈接。請檢查這些

所有上述環節督促，當你希望你的文件的行爲以及對各種設備em是最適合的情況下，。

來源

2012-11-27 15:32:28 mtk

大多數設備將屬於以下3米分辨率 1）VGA的HVGA一半（320×240） 2）WVGA-寬VGA（800×480） - 近1.5 HVGA 3）HVGA 2X的倍 - （640 X 960） - IPHONE 4使用該分辨率爲上述三種分辨率

寫入單獨的CSS文件通過

@Media screen and (min-width: 320px) and (max-width: 480px){ 
/* css files here*/ 
}

或

@Media screen and (min-device-pixel-ratio: 2) 
{/* css files here*/ 

}

與其他決議一樣。以1分辨率創建的css類應複製粘貼在所有三種分辨率中以獲得完美視圖。通過這種方式，你可以展示一個完美的設備特定風格

來源

2012-11-27 15:35:04

在獨立於設備的單元中定義css寬度/高度？

回答

相關問題