考虑到这么多不同的分辨率，物理英寸与 css 中的像素有何关系？
以下代码设置两个 div 元素的高度 - 一个以英寸为单位，另一个以像素为单位。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS 2</title>
<style type="text/css">
.div1{
border:solid 1px red;
height:1in
}
.div2{
border:solid 1px green;
height:96px
}
</style>
</head>
<body>
<div class="div1">This is the content in div 1</div>
<div style="clear:both"> </div>
<div class="div2">This is the content in div 2</div>
</body>
</html>
现在，即使更改屏幕分辨率，两个 div 的高度也始终保持不变。
我所期望的是，第一个 div（以英寸为单位指定的高度）将保持不变，而第二个 div（以像素为单位指定）的高度将发生变化。
情况尚不清楚：
由于这种行为，以下 当我们用“in”指定元素的高度时，它是否等于物理英寸？
如果是，那么当屏幕分辨率改变时，为什么这样的元素的高度会改变呢？
如果不是，那么我们如何才能将元素的大小与物理世界的维度联系起来呢？
b.像素和英寸如何相互关联。
有人可以指导一下或指出一些有用的链接吗？
提前致谢。
Following code sets the height of two div elements - one in inch and one in pixel.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS 2</title>
<style type="text/css">
.div1{
border:solid 1px red;
height:1in
}
.div2{
border:solid 1px green;
height:96px
}
</style>
</head>
<body>
<div class="div1">This is the content in div 1</div>
<div style="clear:both"> </div>
<div class="div2">This is the content in div 2</div>
</body>
</html>
Now, even on changing the resolution of the screen the height of both the divs always remains same.
What I was expecting is that the first div (having height specified in inch) would remain same where as the height of second div (specified in pixels) would change.
Due to this behaviour, there are following things which are being unclear:
a. When we specify height of an element in 'in' then is it equal to the physical inch?
If yes, then when the resolution of the screen is changed, why the height of such an element changes?
If not, then what way can we relate the size of an element with the physical world dimensions?
b. How are pixel and inch related to each other.
Could anyone please guide at this or point to some useful link?
Thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
css 中的英寸是逻辑英寸而不是物理英寸，因为大多数浏览器无法确定屏幕的物理尺寸。默认情况下，此值设置为 96dpi ，因此每英寸为 96px。
参考此处
我的建议是不要依赖英寸/厘米单位，而是基于 em 的布局和使用用于动态调整大小的 javascript，如下所示： Dynamically Resizing Text with CSS and JavaScript
The inch in css is a logical inch and not physical since most browsers cannot determine the physical size of the screen. By default this is set to 96dpi , hence 96px for each inch.
Refer here
My recommendation would be not to rely on inch/cm units but rather em based layout and use javascript for dynamic resizing as shown here : Dynamically Resizing Text with CSS and Javascript