如何使用CSS進行佈局縮放？

我一直在嘗試使用不同的單位（％，em，pt）在不同的DPI上進行佈局縮放。我嘗試改變Windows DPI設置，但是在每種情況下，儘管整個系統看起來更大，但佈局看起來像相同尺寸的事件。我怎樣才能使佈局在尊重DPI方面向上和向下擴展？如何使用CSS進行佈局縮放？

例如，

<p style="font-size: 1em;">Testing out</p>

不會結垢。

來源

2010-12-19 Tower

您需要校準瀏覽器以匹配屏幕的DPI。並非所有瀏覽器都能從系統DPI中獲取它。

這就是說，不要。大多數系統沒有正確校準DPI，所以基於此做任何事情都是浪費精力。

來源

2010-12-19 11:54:02 Quentin

所以，我只是不應該擔心？我不是很清楚爲什麼如果''em''比'px'更有說服力，如果它實際上沒有縮放。我知道像IE這樣的舊瀏覽器有一些問題，但我住在2010年（IE9，Fx4，Chrome 10，Opera 11）。當涉及到與分辨率無關的縮放時，使用'em'比如說'px'有什麼區別嗎？我知道'em'是一個相對單位，'px'是一個絕對單位，但是似乎在實際縮放中沒有區別。 – Tower 2010-12-19 12:04:50

'em'會根據字體大小進行縮放（應該將其設置爲理智的用戶偏好，除非您覆蓋它）。相對於DPI而言，您可以做的任何事情都無法實現。 – Quentin 2010-12-19 12:13:06

您將需要從PHP生成所有CSS，並添加一些JavaScript來計算用戶的DPI，然後可以使用它來縮放像素值。

這是如何做到這一點：

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div> 

<script type='text/javascript'> 
dpi_x = document.getElementById('testdiv').offsetWidth; 
dpi_y = document.getElementById('testdiv').offsetHeight; 
</script>

（我把代碼從this useful page）

所有你需要做的是要麼把這些值，PHP和縮放所有的CSS像素值96/dpi_x或72/dpi_x，具體取決於您的初始設計的佈局。

來源

2010-12-19 12:17:04 weltraumpirat

這是行不通的。它需要瀏覽器認爲是DPI，用它來繪製一個元素，然後測量像素大小。它確實有效：'（（x * 72）/ 72）'。你得到的設置，而不是真正的DPI。如果你只是首先使用'pt'或'in'，那麼瀏覽器會使用這種測量進行擴展，所以這對JavaScript非常浪費。爲了強調這一點，您引用的URL聲稱在我的系統上0.85「爲1」。 – Quentin 2010-12-19 12:20:32

嗯。採取的點。不過，您可以使用相同的方法通過screenWidth或innerWidth進行縮放 - 這樣您就可以依賴視圖窗格的實際大小。您可以設置一個最小值以防止它縮小到800x600以下，但是如果您有更多的像素可以使用，請將其放大。你也可以設置一個默認值，如果JavaScript不會返回任何東西，所以依賴性會很小。 – weltraumpirat 2010-12-19 12:29:46

如何使用CSS進行佈局縮放？

回答

相關問題