Как узнать размер элементов сайта в pixel
Перейти к содержимому

Как узнать размер элементов сайта в pixel

  • автор:

Единицы измерения: px, em, rem и другие

В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

Достоинства

  • Главное достоинство пикселя – чёткость и понятность

Недостатки

  • Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Давно на свалке: mm , cm , pt , pc

Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

  • 1mm (мм) = 3.8px
  • 1cm (см) = 38px
  • 1pt (типографский пункт) = 4/3 px
  • 1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

Почему в сантиметре cm содержится ровно 38 пикселей?

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

 
Страусы
Живут также в Африке

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в одинаков.

А вот аналогичный пример с em вместо px :

 
Страусы
Живут также в Африке

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое размер шрифта?

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

Единицы ex и ch

В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .

Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква «x» и ноль «0» . В этом случае они носят более условный характер.

Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.

Проценты %

Проценты % , как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с % , он выглядит в точности так же, как с em :

 
Страусы
Живут также в Африке

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Единица rem: смесь px и em

Итак, мы рассмотрели:

  • px – абсолютные, чёткие, понятные, не зависящие ни от чего.
  • em – относительно размера шрифта.
  • % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.

Следующие кандидаты – em и % .

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .

Вроде бы, использовать можно, однако есть проблема.

Протестируем на таком списке:

Верстка под ретину — как определять плотность пикселя?

Это вопрос из прошлого и поставлен он был несколько странно. Но ответ ниже более чем актуален. Перелопатив с десяток статей я начал осознавать, что ppi — большая палка в колеса. Как с ним бороться, пока не ясно. Итак, у нас есть элементарная страница: jsfiddle.net Мы хотим 14px (к примеру) — как основной размер шрифта. Допустим, что так было в PSD от дизайнера. От этого будем отталкиваться. Обварачиваем весь контент в div.font-size-setting , которому выставляем font-size: 1.4em (так как после нормализации у нас было 10px ). Смотрим на страницу с разных устройств: alt textБудь там iphone4 шрифт и квадратик были бы еще меньше. Проблема, очевидно, в большой разнице в ppi ( pixels per inch ) устройств. Обычные мониторы имеют 96ppi . У iphone3 163ppi . У виты 220ppi . Очевидное решение — это определить ppi устройства и увеличить шрифт. С последним проблем никаких. Обарачиваем в div.font-size-normalize и в зависимости от dpi выставляем соответствующий шрифт: jsfiddle.net Получаем: div.font-size-setting — чтобы выставить размер шрифта от дизайнера, div.font-size-normalize — делаем этот шрифт одинакового размера (визуально) на всех устройствах. alt textЯблофон чуть растянул сам шрифт или увеличил расстояниями между строчкам, но по сути все сходится. Так или иначе, квадратик с размерами в em везде одинаковый, хоть линейкой меряй. Вопрос в том, как определять ppi ? 1. media queries — resolution Медиа запросы умеют определять не только ширину и высоту, но и много других характеристик, в том числе и dpi ( dots per inch ). Вообще dpi — бессмысленный параметр для дисплея, так как это параметр для печати принтером, но в нашем случае совпадает с ppi . Я решил, что не плохо было бы сделать шаг в 0.1em . Это примерно каждые 10ppi . Взяв наши 96ppi за 1em составил табличку и посчитал диапазон так, чтобы интересующие нас значения были в середине. Составил запросы:

 @media screen and (min-resolution: 90dpi) and (max-resolution: 100dpi) < .font-size-normalize < font-size: 1em; /* normal desktops */ >> @media screen and (min-resolution: 101dpi) and (max-resolution: 111dpi) < .font-size-normalize < font-size: 1.1em; >> @media screen and (min-resolution: 112dpi) and (max-resolution: 122dpi) < .font-size-normalize < font-size: 1.2em; >> /*. */ @media screen and (min-resolution: 158dpi) and (max-resolution: 168dpi) < .font-size-normalize < font-size: 1.7em; /* iphone3 */ >> /*. */ @media screen and (min-resolution: 216dpi) and (max-resolution: 226dpi) < .font-size-normalize < font-size: 2.3em; /* ps vita */ >> /*. */ @media screen and (min-resolution: 322dpi) and (max-resolution: 332dpi) < .font-size-normalize < font-size: 3.4em; /* iphone4 */ >> 

http://jsfiddle.net/AHzYJ/3/ Последние версии десктопных браузеров проработали медиазапросы. Браузеры iphone3 и ps vita не осилили. Думаю последние яблофоны, яблопэды, дройдофоны все же справятся, но тем не менее решение далеко не пуленепробиваемо 🙁 2.media queries — devicePixelRatio и канонический пиксель dip — density(device)-independent pixel — что то вроде канонического пикселя. Равен одному физическому пикселю на 160ppi . С другой стороны мы имеем параметр devicePixelRatio , который может быть использован как аргумент медиа-запроса относительно канонического пикселя:

@media screen and (device-pixel-ratio: 1) <> 

Можно написать аналогичное примеру выше множество запросов:

@media screen and (min-device-pixel-ratio: 1) and (max-device-pixel-ratio: 1.1) < .font-size-normalize < font-size: 2.3em; /* ps vita */ >> 

Но у меня ни для одного девайса/компьютера/браузера этого толком сделать не получилось. Такое ощущение, что этот параметр может быть только целочисленным: единица — для iphone3 , двойка — для iphone4 . Более того, требуются вендерные префиксы, что уже как минимум говорит об отсутвии кросс-браузерности или кросс-девайсности. Еще одна несостыковка в том, что » device-pixel-ratio: 2 » (означающий 320ppi ) отрабатывает на iphone4 , обладающий 326ppi . 3. JS

alert(window.devicePixelRatio); 

Думаю, оно работает точно так же как и второй способ. На iphone3 я увидел «1», так же как в десктопном браузере и на вите, что само собой чушь. На iphone4 высветилось «2», но после предыдущих фэйлов это уже не имеет значение. Еще проблема: тормозилла не справилась и показала undefined . 4.Самописные JS -функции, определяющие ppi . Что-то типа взять device-width и поделить на width . Это работает на мобильных устройствах, так как нельзя сплющить окно браузера, но в десктопном браузере мы можем просто уменьшить размер окна и все сломается. В конечном итоге, я не нашел ни одного полнофункционального решения. Думаю, что просто должно пройти время, пока » device-pixel-ratio: n » будет пониматься всеми. А пока надо придумать как максимизировать количество удачных определений ppi . Ведь описанные выше способы частично, но все же работают. Кто что думает по этому поводу, какие можетe предложить решения и как можно обобщить вышеуказанные способы в один пусть полурабочий вариант?

Подход «Pixel Perfect»

Разбираемся с одним из основных подходов к вёрстке сайтов.

Время чтения: 9 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Пример
  3. Расширения помогают найти неточности
    1. Нужно ли учитывать все отличия?
    1. Когда использовать Pixel Perfect
    2. Когда идеальной вёрсткой можно пренебречь
    3. Взгляд со стороны заказчика
    4. Если вы новичок
    1. В чём разница между адаптивным дизайном (adaptive design) и отзывчивым дизайном (responsive design)?

    Обновлено 8 мая 2023

    Кратко

    Скопировать ссылку «Кратко» Скопировано

    Pixel Perfect — это подход в вёрстке, когда итоговый результат максимально точно, пиксель в пиксель, совпадает с дизайнерским макетом. Для этого макет сайта сохраняется как обычная картинка, после чего эта картинка накладывается поверх свёрстанного сайта при помощи специальных инструментов, например, браузерных расширений. После наложения становится очевидной разница, если она есть, между тем, как нарисовал дизайнер, и тем, что получилось в итоге.

    Пример

    Скопировать ссылку «Пример» Скопировано

    Допустим, дизайнеры подготовили нам такой макет:

    Макет страницы «Курс обмена криптовалют» с рейтингом популярных площадок.

    Мы его сверстали, получилось вот так:

    Интерфейс расширения PerfectPixel.

    При сравнении с макетом видно, что вёрстка совпадает с ним практически идеально:

    Вёрстка с наложенным поверх макетом, где они почти совпадают.

    Работа с адаптивными макетами

    Скопировать ссылку «Работа с адаптивными макетами» Скопировано

    Современный сайт должен адаптироваться под разные разрешения экранов. Обычно это мобильные экраны, планшеты, ноутбуки и десктопы. В таком случае дизайнер делает по одному макету на каждое необходимое разрешение. Используйте инструменты разработчика, чтобы проверить вёрстку на разных разрешениях. Их можно открыть несколькими способами:

    • Control Command I — на macOS;
    • F12 — на Windows;
    • Control Shift I — на Linux.

    Включаем панель инструментов устройства (device toolbar) и выбираем нужный размер экрана. Можно задать размер вручную или выбрать один из предустановленных шаблонов.

    Окно браузера с открытыми инструментами разработчика и панелью инструментов устройства.

    После чего делаем всё так же, как раньше. Открываем расширение и добавляем картинку макета для соответствующего разрешения, после чего ищем отличия в вёрстке.

    Всегда ли нужен Pixel Perfect

    Скопировать ссылку «Всегда ли нужен Pixel Perfect» Скопировано

    Требования к вёрстке зависят от задачи и от того, кто её поставил. Если заказчик требует вёрстки по Pixel Perfect — придётся соблюдать это требование. Если же заказчик не требует идеальной вёрстки (или он не знает, что такое бывает), то можно придерживаться следующего алгоритма.

    Когда использовать Pixel Perfect

    Скопировать ссылку «Когда использовать Pixel Perfect» Скопировано

    Если мы делаем презентационный вау-проект, то положение каждого элемента должно быть выверено до пикселя.

    Если мы вносим изменения в сложную систему с кучей элементов, то поехавшую вёрстку можно даже не заметить, а вот при использовании Pixel Perfect изменения сразу бросятся в глаза.

    Если все участники процесса понимают, для чего нужен Pixel Perfect и чего с его помощью мы пытаемся добиться, то впереди будет лишь продуктивная работа. Но иногда бывает, что у дизайнера дрогнула рука, и один элемент в списке случайно подвинулся на 1 пиксель. Затем макет прошёл цепочку согласований, и любая правка в нём — это недели бюрократических процессов. И тогда сплошь и рядом появляется ужасный код вида:

     .list-item:nth-child(4)  margin-left: 1px;> .list-item:nth-child(4)  margin-left: 1px; >      

    Всё потому, что вёрстка по Pixel Perfect — один из критериев приёмки работы заказчиком. И гораздо быстрее встроить ряд таких «костылей», чем поправить макет и запустить ещё один раунд голосования. Таких ситуаций стоит по возможности избегать, потому что подобный код лишь делает сайт тяжелее и медленнее, необходимо выстраивать более гибкие бизнес-процессы.

    Когда идеальной вёрсткой можно пренебречь

    Скопировать ссылку «Когда идеальной вёрсткой можно пренебречь» Скопировано

    Если скорость разработки сильно важна. Например, мы делаем стартап, и если завтра не выйдем на рынок, то это сделают конкуренты. В таком случае какая-нибудь вёрстка, но сделанная быстро, гораздо лучше идеальной, на полировку которой ушли драгоценные часы.

    Если точность вёрстки не важна вообще. Например, мы делаем прототип продукта, который потом будет ещё десять раз переделываться, или панель администрирования, которой будут пользоваться технические специалисты, а не пользователи. Безусловно, это не значит, что мы можем в таком случае верстать как угодно, но и идеала добиваться не стоит.

    Если точная вёрстка в принципе недостижима. Например, у графических редакторов, таких как «Фотошоп», рендеринг шрифтов может отличаться от браузерного. И тогда мы не сможем адекватно добиться, чтобы текст в браузере выглядел в точности так, как в «Фотошопе» — придётся играть с letter — spacing , разделять текст на лишние блоки и заниматься прочей уличной магией. Таких манипуляций стоит избегать.

    Взгляд со стороны заказчика

    Скопировать ссылку «Взгляд со стороны заказчика» Скопировано

    Подход Pixel Perfect — самый простой способ для заказчика проверить качество вёрстки. Зачастую заказчик не обладает опытом веб-разработки и не сможет отличить плохой HTML- и CSS-код от хорошего. Но он сможет сравнить макет и результат, и если они совпадают — значит, верстальщик сделал свою работу хорошо.

    Вам же, как верстальщику, это даёт конкурентное преимущество — говоря «Я верстаю по Pixel Perfect», вы сообщаете заказчику «Я сделаю именно то, что вам нужно, и вы сможете это очень легко проверить».

    Если вы новичок

    Скопировать ссылку «Если вы новичок» Скопировано

    Когда вы только начинаете путь в веб-разработке и вёрстке, использование подхода Pixel Perfect крайне желательно. Это поможет вам развить очень важные качества:

    • Глазомер. После получения определённого опыта вы сможете буквально с одного взгляда замечать неточности в вёрстке.
    • Чувство визуального ритма. Дизайнеры выбирают отступы между элементами, размеры шрифтов и иконок и т. д., основываясь на определённых критериях визуального ритма, которые помогают сделать сайт более приятным для глаза. Если вы будете постоянно следовать макетам дизайнеров, чувство визуального ритма разовьётся и у вас.
    • Внимательность и дотошность. Один из основных критериев хорошего программиста или верстальщика — способность внимательно и сфокусированно выполнять свою работу, не допуская неточностей.

    Итог

    Скопировать ссылку «Итог» Скопировано

    1. Используйте подход Pixel Perfect, чтобы найти отличия получившейся вёрстки от исходного макета.
    2. Не страдайте излишним перфекционизмом — обращайте внимание только на значимые отличия.
    3. Обговорите требования к точности перед началом работы. При необходимости объясните коллегам, почему абсолютное совпадение макета и вёрстки не всегда достижимо, и что в этом нет ничего сильно страшного.

    На собеседовании

    Скопировать ссылку «На собеседовании» Скопировано

    В чём разница между адаптивным дизайном (adaptive design) и отзывчивым дизайном (responsive design)?

    Скопировать ссылку «В чём разница между адаптивным дизайном (adaptive design) и отзывчивым дизайном (responsive design)?» Скопировано

    Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

    Как отмерять сколько пикселей от одного обьекта до другого?

    SmthTo

    pixel perfect -https://chrome.google.com/webstore/detail/perfectp.
    Самый нужный инструмент для ЯЗЫКА ПРОГРАМИРОВАНИЯ HTML.

    Ответ написан более трёх лет назад
    Нравится 1 5 комментариев

    KickeRocK

    Бред. Самый нужный — мозг

    Andrew, мозг, конечно, хорошо, но помочь в разработке никогда не помешает. Даже вы код пишите не в блокноте.

    KickeRocK

    Константин Тимошено, откуда инфа?) иногда,в блокноте пишу(бумажном). Порой, на внутренних стенках сосуда для мозга

    KickeRocK

    Александр Мех, шуточки, обычно, в комментарии добавляют, человек, которому вы хотите «помочь» своим ответом может и не понимать что вы шутите.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *