如何使用CSS制作布局比例？

Question

我一直在尝试使用差异单位（％，em，pt）来跨不同的DPI进行布局缩放。我尝试更改Windows DPI设置，但在每种情况下，布局看起来都是相同的大小，尽管整个系统看起来更大。如何使布局按比例放大和缩小DPI？

例如，

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

无法扩展。

Answer 1

您需要校准浏览器以匹配屏幕的DPI。并非所有浏览器都会从系统DPI中获取它。

那就是说，不要。大多数系统没有正确校准其DPI，因此尝试基于此做任何事情都是浪费精力。

Answer 2

您需要从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，具体取决于您的初始设计的布局。