Как физический дюйм соотносится с пикселями в CSS при стольких разрешениях? - PullRequest
Новая
       41

Как физический дюйм соотносится с пикселями в CSS при стольких разрешениях?

2 голосов
/ 01 октября 2011

Следующий код устанавливает высоту двух элементов 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', тогда она равна физическому дюйму?

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

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

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

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

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

1 Ответ

3 голосов
/ 01 октября 2011

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

См. Здесь

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

...