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.
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