Где мое мышление не так? Браузер весов простой <div>коробка - PullRequest
Новая
       12

Где мое мышление не так? Браузер весов простой <div>коробка

3 голосов
/ 06 июня 2019

Сегодня я сделал простой тест. 

    <html>
    <head>
    <style>
     #box_4cm {
      width: 4cm;
      height: 4cm;
      padding: 0;
      margin: 0;
      border: 1px solid black;
     }
     #box_223px {
      width: 223.25px;
      height: 223.25px;
      padding: 0;
      margin: 0;
      border: 1px solid black;
     }
    </style>
    </head>
    <body>
     <div id="box_4cm"></div>
     <div id="box_223px"></div>
    </body>
    </html>

Эта уценка проверяет размеры двух коробок. Первая коробка должна иметь ширину 4cm и высоту 4cm. Вторая коробка должна быть одинакового размера. Что касается второй коробки, я измерил размер экрана, он составляет 1920x1080px, 34.4cm. Затем сделал расчеты. 1cm = 55.81px -> 4cm = 223.25px.

Когда я набираю этот вопрос, из результата фрагмента кода SO я вижу, что блоки имеют разный размер. Кроме того, первая коробка 3,5 см в отличие от 4 см. Вторая коробка размером около 5 см. Результаты явно неверны.

После экспорта приведенного выше HTML-кода в PDF я получил ожидаемые результаты, что касается первого окна, оно отображается как истинное значение 4 см. Более того, предоставив мои размеры в пикселях, я все еще получил неправильные реальные размеры. Другими словами, если я сделаю #box {width:100px; height:100px;}, результат будет отличаться по размеру. Я проверил это с gimp measure tool.

Так что я продолжаю с того, с чего начал. Где мое мышление не так?

P.S Моя система - Linux Mint, браузер - Chromium.

screen 1* * 1030

screen 2

Приведенные выше два снимка экрана показывают, что #box_223px {width: 223.25px; ... } имеет ширину 294px. Вы можете увидеть это на нижней панели gimp.

Ответы [ 2 ]

2 голосов
/ 06 июня 2019

Я думаю, вы неправильно его преобразовали.
1 см = 96 пикселей / 2,54 = 37,7952755906
4 см = (96 пикс. / 2,54) * 4 = 151,181102362 

<html>
    <head>
    <style>
     #box_4cm {
      width: 4cm;
      height: 4cm;
      padding: 0;
      margin: 0;
      border: 1px solid black;
     }
     #box_151px {
      width: 151.181102362px;
      height: 151.181102362px;
      padding: 0;
      margin: 0;
      border: 1px solid black;
     }
    </style>
    </head>
    <body>
     <div id="box_4cm"></div>
     <div id="box_151px"></div>
    </body>
    </html>
2 голосов
/ 06 июня 2019

Вы не можете этого сделать. cm, in и другие единицы длины подходят только для печати. ​​

Это связано с тем, что браузеры могут знать пиксели монитора (через графическую карту), а не о реальном мире измерениях (размер экрана)

См. Эту цитату из MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Absolute_length_units

Абсолютные единицы длины представляют физическое измерение, когда известны физические свойства выходного носителя, например, для макета печати. Это делается путем привязки одного из блоков к физическому блоку, а затем определения других относительно него. Привязка выполняется по-разному для устройств с низким разрешением, таких как экраны, и устройств с высоким разрешением, таких как принтеры.

Для устройств с низким разрешением, единица измерения px представляет физический эталонный пиксель; другие единицы определены относительно этого. Таким образом, 1in определяется как 96px, что равно 72pt. Следствием этого определения является то, что на таких устройствах размеры, описанные в дюймах (in), сантиметрах (cm) или миллиметрах (mm), необязательно соответствуют размеру физической единицы с тем же именем .

Для устройств с высоким разрешением дюймы (in), сантиметры (cm) и миллиметры (mm) совпадают с их физическими аналогами. Поэтому единица px определяется относительно них (1/96 от 1 дюйма).

В результате:

Используйте пиксельные единицы для дисплеев, единицы длины будут неправильными.
Используйте единицы длины для печати, возможно, пиксельные, если не обращаете внимания на абсолютные значения.

...