如何使用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进行布局缩放？

回答

相关问题