Как физический дюйм связан с пикселями в 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">&nbsp;</div>
    <div class="div2">This is the content in div 2</div>
</body>
</html>

Теперь даже при изменении разрешения экрана высота обоих div всегда остается неизменной.

Я ожидал, что первый div (с высотой, указанной в дюймах) останется таким же, как изменится высота второго div (указана в пикселях).

Из-за такого поведения остаются неясными следующие вещи:

а. Когда мы указываем высоту элемента в «in», равна ли она физическому дюйму?

Если да, то при изменении разрешения экрана почему меняется высота такого элемента?

Если нет, то каким образом мы можем связать размер элемента с размерами физического мира?

б. Как пиксель и дюйм связаны друг с другом.

Может ли кто-нибудь помочь в этом или указать на какую-то полезную ссылку?

Заранее спасибо.


css measurement pixel resolution
person netemp    schedule 01.10.2011    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Дюйм в css — это логический дюйм, а не физический, поскольку большинство браузеров не могут определить физический размер экрана. По умолчанию установлено значение 96 dpi, следовательно, 96 пикселей на каждый дюйм.

Ссылка

Моя рекомендация заключалась бы в том, чтобы не полагаться на единицы измерения дюймов/см, а использовать компоновку на основе em и использовать javascript для динамического изменения размера, как показано здесь: Динамическое изменение размера текста с помощью CSS и Javascript

person ShadyKiller    schedule 01.10.2011
comment
Спасибо за ответ. Я обнаружил, что 1 дюйм = 96 пикселей для Windows и 1 дюйм = 72 пикселя для Mac. Таким образом, этот коэффициент конверсии — единственное, что остается постоянным, когда пользователь переходит от одного разрешения к другому? - person netemp; 01.10.2011
comment
Кроме того, если это так, то такие единицы, как «дюймы» или «см», также являются относительными по своей природе, а не «абсолютными», как они на самом деле называются? (как указано здесь — w3.org/TR/CSS21/syndata.html #length-unit ) - person netemp; 01.10.2011
comment
Отредактировал ответ выше для возможного решения того, что вы хотите - person ShadyKiller; 01.10.2011
comment
Спасибо ShadyKiller за дополнительную информацию. Но на самом деле я не ищу никакого решения, а просто хочу лучше понять измерения в CSS. Именно по этой причине я разместил еще несколько вещей в комментариях выше. Хотя еще раз спасибо за помощь. - person netemp; 01.10.2011