Содержание

px, em, rem и другие

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

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

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

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

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

Достоинства

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

Недостатки

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

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

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

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

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

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

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

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

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

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

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

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

<div>
  Страусы
  <div>Живут также в Африке</div>
</div>

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

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

<div>
  Страусы
  <div>Живут также в Африке</div>
</div>

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

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

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

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

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

р, g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

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

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

В этом случае они носят более условный характер.

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

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

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

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

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

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

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

<div>
  Страусы
  <div>Живут также в Африке</div>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

font-size родителя, то есть ведут себя так же, как и em.

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

Попробуем использовать этот подход для <li>.

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

<ul>
<li>Собака
  <ul>
  <li>бывает
    <ul>
    <li>кусачей
      <ul>
      <li>только
        <ul>
        <li>от жизни
          <ul>
          <li>собачей</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>

Пока это обычный вложенный список.

Теперь уменьшим размер шрифта до 0.8em, вот что получится:

<style>
  li {
    font-size: 0.8em;
  }
</style>
<ul>
<li>Собака
  <ul>
  <li>бывает
    <ul>
    <li>кусачей
      <ul>
      <li>только
        <ul>
        <li>от жизни
          <ul>
          <li>собачей</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>

Проблема очевидна. Хотели, как лучше, а получилось… Мелковато. Каждый вложенный

<li> получил размер шрифта 0.8 от родителя, в итоге уменьшившись до нечитаемого состояния. Это не совсем то, чего мы бы здесь хотели.

Можно уменьшить размер шрифта только на одном «корневом элементе»… Или воспользоваться единицей rem, которая, можно сказать, специально придумана для таких случаев!

Единица rem задаёт размер относительно размера шрифта элемента <html>.

Как правило, браузеры ставят этому элементу некоторый «разумный» (reasonable) размер по умолчанию, который мы, конечно, можем переопределить и использовать rem для задания шрифтов внутри относительно него:

<style>
  html {
    font-size: 14px;
  }
  li {
    font-size: 0.8rem;
  }
</style>
<div><button>Кликните, чтобы увеличить размер шрифта</button></div>
<img src="https://js.cx/clipart/angry_dog. png">
<ul>
<li>Собака
  <ul>
  <li>бывает
    <ul>
    <li>кусачей
      <ul>
      <li>только
        <ul>
        <li>от жизни
          <ul>
          <li>собачей</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>
<script>
let html = document.documentElement;
up.onclick = function() {
  // при помощи JS увеличить размер шрифта html на 2px
  html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
};
</script>

Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы.

Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта <html>.

Единица rem не поддерживается в IE8-.

Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта CSS Values and Units 3:

  • vw – 1% ширины окна
  • vh – 1% высоты окна
  • vmin – наименьшее из (vw, vh), в IE9 обозначается vm
  • vmax – наибольшее из (vw, vh)

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

Их основное преимущество – в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.

Этот текст написан с размером `5vh`.

Вы сможете легко увидеть, как работает vh, если поменяете высоту окна браузера. Текст выше будет расти/уменьшаться.

Мы рассмотрели единицы измерения:

  • px – абсолютные пиксели, к которым привязаны и потому не нужны mm, cm, pt и pc. Используется для максимально конкретного и точного задания размеров.
  • em – задаёт размер относительно шрифта родителя, можно относительно конкретных символов: "x"(ex) и "0"(ch), используется там, где нужно упростить масштабирование компоненты.
  • rem – задаёт размер относительно шрифта <html>, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в rem, а JS меняет шрифт у <html>.
  • % – относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.
  • vw, vh, vmin, vmax – относительно размера экрана.

em, px, pt, cm, in…

Языки

Это перевод. Здесь могут содержаться ошибки или страница может быть устаревшей по отношению к Английской версии. Переводчик: Илья Стрельцын

См. также оглавление со всеми советами.

На этой странице:

  • em, px, pt, cm, in…
  • Размеры шрифтов
  • Новые единицы: rem, vw…

em, px, pt, cm, in…

Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт (pt) и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px. Значит ли это, что для разных свойств нужны разные единицы?

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

Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях (margin: 5px) также допускает и значения в дюймах или сантиметрах (margin: 1. 2in; margin: 0.5cm), и наоборот.

Но в целом для отображения на экране и для печати лучше использовать разные наборы единиц измерения. Советы по использованию единиц собраны в следующей таблице:

Ре­ко­мен­ду­ютсяМож­но ино­гдаНе ре­ко­мен­ду­ются
Экранem, px, %expt, cm, mm, in, pc
Печатьem, cm, mm, in, pt, pc, %px, ex

Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm): ↑
72pt
↓

Так называемые абсолютные единицы (cm, mm, in, pt и pc) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру. Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати. На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось.

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

CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.

Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами — это много. Лучше вместо них использовать относительные единицы, напр. em.

Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие text-indent: 1.5em и margin: 1em в CSS крайне популярны.

Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота — это, грубо говоря, высота строчных букв вроде a, c, m, или o. У шрифтов с одинаковым размером (и, соответственно, при одинаковом em) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам.

Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.

Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.

На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px, чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы cm, pt, mm, in и pc, как объяснялось выше).

CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px. Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px, а не pt, cm и т.д.

Используйте

em или px для шрифтов

Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt, пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt, ни других абсолютных единиц, а использовать только em и px.

Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

Волшебная единица CSS, px, часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.

Но размеры шрифтов еще лучше задавать в em. Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em: h2 {font-size: 2.5em}, чтобы h2 был в 2½ раза крупнее основного шрифта страницы.

Едиственное место, где можно использовать pt (либо cm или in) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

Таким образом, единица px избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа px, всегда выглядит хорошо и везде достаточно похоже. Но что, если мы хотим узнать разрешение устройства, например, чтобы решить, можно ли использовать линию в 0.5px? Выход — проверить разрешение с помощью медиавыражений. Подробности о медиавыражениях — за рамками этой статьи, но вот небольшой пример:

div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
  /* Media with 2 or more dots per px */
  div.mybox { border: 1.5px solid }
}

Новые единицы измерения в CSS

Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem. Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em, который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и h2 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:

p { margin-left: 1em }
h2 { font-size: 3em; margin-left: 0.333em }

и новая версия:

p { margin-left: 1rem }
h2 { font-size: 3em; margin-left: 1rem }

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh. Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin, соответствующая меньшему из vw и vh. И vmax (можете догадаться, что она делает).

Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.

Bert Bos, style activity lead
Copyright © 1994–2021 W3C® Privacy policy

Created 12 Jan 2010;
Last updated Ср 06 янв 2021 05:40:49

Пришло время попрощаться с единицей измерения px / Хабр

Если вы занимаетесь дизайном сайтов или их разработкой — не используйте абсолютные единицы измерения. А именно — px, in, mm, cm, pt и pc. Это, в дизайне, так же плохо в плане доступности и отзывчивости контента, как использование таблиц в сфере создания макетов страниц. Если взглянуть на все абсолютные единицы измерения, то окажется, что лишь px упрямо не желает нас покидать. Коллективный разум веб-дизайнеров (что правильно!) отказался от применения всех остальных подобных единиц измерения в деле стилизации материалов веб-страниц.

Дизайнеры и разработчики способны осознать абсурдность применения физических единиц измерения расстояний для стилизации цифрового контента, а вот пиксели… похоже, они кажутся всем достаточно «цифровыми». Но они таковыми не являются. Изначально единица измерения px была предназначена для представления физических пикселей на экранах устройств, то есть — для описания наименьших фрагментов изображений, которые можно окрасить в некий цвет. Они больше не привязаны к этому определению. Взгляните на этот материал о пикселях, написанный ещё в 2010 году. Современные браузеры могут рендерить элементы, измеряемые в сотых долях пикселя.

Почему использование единицы измерения px плохо сказывается на доступности контента?

Пользователи приходят на сайты ради материалов этих сайтов. Поэтому материалы должны быть пригодными для чтения. А это значит, что размеры шрифта должны быть… как минимум 12px? Или, может, 16px? На самом деле, смотреть надо по ситуации. И зависит это не от самих материалов, а от пользователя. Пользователи могут настраивать свои операционные системы или браузеры, устанавливая предпочитаемый ими размер шрифта, соответствующий их нуждам. Если им это нужно, то, настроив применение шрифта, размер которого крупнее стандартного, они могут спокойно, не приглядываясь, просматривать списки контактов и читать электронные письма. Если сайт создан с использованием размеров шрифтов, выраженных в единицах измерения px, то таким пользователям, для которых эти шрифты слишком мелки, даже если они и настроили удобный для себя размер шрифта, будет неудобно читать материалы сайта. Дело в том, что размеры, выраженные в пикселях, не масштабируются даже в том случае, когда браузер меняет размер шрифта корневого элемента. (Это утверждение, правда, нельзя назвать полностью правильным — Safari игнорирует размеры, выраженные в пикселях, и всё равно масштабирует шрифты.)

Уважайте нужды своих пользователей и выполняемые ими настройки их рабочей среды, настраивая размеры шрифтов с использованием единицы измерения rem. Такие шрифты хорошо масштабируются. Для организации плавного изменения размеров шрифтов (fluid typography) используйте в расчётах единицу измерения rem.

Почему использование px — это плохо для отзывчивого веб-дизайна?

Страница, при создании которой используется подход, известный как «отзывчивый дизайн», должна подстраиваться под устройства, на которых выводят эту страницу, и под содержимое, которое выводят на странице. Если макет зависит от размера экрана, то в современных условиях уже нельзя рассчитывать на то, что экран мобильных устройств имеет 320px в ширину, или что полная ширина экрана настольного компьютера равна 1024px. В нашем распоряжении имеются единицы измерения, связанные с областью просмотра страницы (vh, vw, vmax и vmin), использование которых позволяет настроить правильную подстройку страниц под экраны разных размеров, не зависящую от их физических параметров.

Если макет зависит от содержимого страницы, например, когда вокруг надписи на кнопке нужно предусмотреть некое пустое пространство, то единицы измерения px позволяют достичь приемлемого результата лишь в том случае, когда текст надписи имеет определённый размер. Изменение размеров шрифта приведёт к тому, что, для придания странице нужного вида, придётся перенастраивать внутренние или внешние отступы, или ширину столбцов, или что угодно другое. А если при настройке параметров элемента макета использованы единицы измерения, ориентированные на размер шрифта (em, ch, ex и rem), то изменение свойства font-size приведёт к автоматическому изменению параметров макета. Этими возможностями удобно пользоваться при создании гибких дизайнов, это помогает поддерживать размер свободного пространства вокруг текста на правильном уровне. Это, кроме того, позволяет странице хорошо выглядеть даже тогда, когда пользователь устанавливает гораздо более крупный размер шрифта, чем тот, что изначально использовался на странице.

А как насчёт…


▍изображений?

Не должны ли мы, по совету Джен Симмонс, указывать размеры изображений в пикселях? Да, должны, но в HTML, а не в CSS. При стилизации элементов img или video нужно, для поддержания их в отзывчивом состоянии, использовать относительные единицы измерения и свойство aspect-ratio.

▍размеров шрифтов, заданных с помощью функции clamp()?

Нормально ли выглядит такая конструкция: font-size: clamp(12px, 10vw, 22px)? Нет, не нормально. Тут предпочтения пользователя игнорируются дважды. Во-первых — здесь, для указания размера, применяются единицы измерения vw, которые не масштабируются в соответствии с настройками, задаваемыми пользователем. Во-вторых — что произойдёт, если пользователь задаст размер базового шрифта, превышающий 22px? Эта настройка будет проигнорирована. Вместо этого в каждый аргумент функции clamp() стоит включить единицы измерения, опирающиеся на параметры шрифта: font-size: clamp(0.75rem, 0.5rem + 8vw, 1.375rem).

▍медиазапросов?

Об использовании единиц измерения px, em и rem в медиазапросах писали ещё в 2016 году. Если кратко передать смысл той публикации, то окажется, что для того чтобы страница хорошо выглядела бы в разных браузерах и правильно реагировала бы на изменения, предусматривающие изменение размеров текста, нужно использовать единицу измерения em, а не rem или px.

▍тонких линий и маленьких отступов?

Обычно границы между объектами, оформляемые с помощью линии наименьшей толщины, делают, в ширину, равными 1px. Браузеры, кроме того, выводят элементы, размеры которых выражены в очень маленьких значениях rem, как имеющие размеры 1px. Поэтому можно не беспокоиться о том, что тончайшая граница просто исчезнет в том случае, если при настройке её ширины использовать не 1px, а 0.0625rem. (Экспериментально выяснено, что Firefox округляет любые размеры, начиная с 0.001, или 1⁻³. А Webkit-браузеры в этом плане проявляют гораздо большую щедрость, округляя значения в 0.000000000000000000000000000000000000000000000000000000001rem или 1⁻⁵⁶.) Размеры отступов (вроде padding и margin) не округляются до целых пикселей, они могут быть очень маленькими. Если важно, чтобы размер некоего отступа равнялся бы как минимум 1px, тогда я порекомендовал бы использовать конструкцию вида max(1px, really_small_relative_unit).

Подумаем о продвижении моей идеи

Каждая кампания нуждается в броском слогане. Поэтому моё стремление к избавлению веб-дизайна от абсолютных единиц измерения нужно поддержать чем-то вроде наклейки на бампер или футболки с надписью. Вот несколько вариантов:

  • Абсолютные единицы измерения — это абсолютный хлам! (Absolute units are absolute trash!)
  • Просто скажем нет пикселям! (Just say no to pixels!)
  • Абсолютно никаких абсолютных единиц измерения! (Absolutely no absolute units!)
  • Чем относительнее дизайн — тем лучше! (Design is better relatively!)

Я пока что не заказывал футболки, поэтому если у вас возникнет идея более удачного слогана — дайте мне знать.

Как вы относитесь к использованию абсолютных единиц измерения в веб-дизайне?

Чем отличаются px от em

by АлексейОпубликовано

Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера. 

В этой статье я хочу попытаться разобраться чем же отличаются px от em. Итак.

px (пиксели)

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

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

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

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

Достоинства

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

Недостатки

Проблема использования пикселей заключается в том, что IE считает пиксели абсолютным значением и не масштабирует текст, с размером шрифта, указанным в пикселях. Поэтому принято использовать em. Задание размеров блоков в em позволяет создавать масштабируемый дизайн, изменяющийся в зависимости от размера шрифта.

Принято использовать для задания размеров блоков.

em (вычисляемая единица)

Значения указанные в em, ведут отсчет от базового размера шрифта браузера (16px), т.е. по умолчанию 1em=16px. Для удобства использования em, базовый размер шрифта сначала сбрасывают до 10px, когда 1em=10px, а 0,1em=1px. Для сброса базового размера шрифта используйте следующее правило:

body { font-size: 62.5%; }

И учитывайте, если для какого-то блока будет указан размер шрифта, например, 1.6em, то все его потомки за базовое значение будут брать уже не 10px, а 16px(1.6em). Для удобства расчета значений размера шрифтов в em’ах можно использовать вот этот сервис.

Принято использовать для задания размеров текста и/или блоков.

Достоинства

  • Очень удобно и быстро меняются размеры всего.Если мы меняем значение элемента то каскадно поменяются все дочерние элементы.
  • Если нужно, то дочерние элементы можно переопределить как обычно, в пикселях.
  • Это очень удобно для изменения размера программно. Например, пользователь может изменить их в настройках.
  • Очень удобно, и сохраняется качество шрифта при масштабировании размеров страницы.
  • Случается так, что пользователи переопределят размер шрифты через браузер. Использование em.
    позволяет посетителю видеть и использовать масштабируемый текст при любом разрешении и на любом устройстве.

Недостатки

  • Браузеры округлят не целое значение размера , что не сказывается при больших размерах, но на маленьких деталях можно увидеть неточность.
  • В случае наследование значения em тоже наследуется, это может принести не мало хлопот.
  • Конфликтует с препроцессорами(То есть,после компиляции не получиться динамически поменять значениеem ).
  • При использовании transform: scale() элементы перекрывают друг друга.

Таблица соотношений px, pt, em %

Пункт, ptПиксель, pxЕдиница, emПроцент,%
6pt8px0. 5em50%
7pt9px0.55em55%
7.5pt10px0.625em62.5%
8pt11px0.7em70%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1. 05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%
17pt23px1.45em145%
18pt24px1.5em150%
20pt26px1.6em160%
22pt29px1. 8em180%
24pt32px2em200%
26pt35px2.2em220%
27pt36px2.25em225%
28pt37px2.3em230%
29pt38px2.35em235%
30pt40px2.45em245%
32pt42px2.55em255%
34pt45px2.75em275%
36pt48px3em300%
Posted in CSS, HTMLПомеченные css, em, html, px

Единицы измерения в CSS | Techrocks

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи «Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, …)».

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

В этой статье мы рассмотрим относительные и абсолютные единицы измерения, а также единицы измерения области просмотра (viewport-единицы).

Относительные единицы измерения

Размеры в CSS можно указывать не только в абсолютных единицах, таких как пиксели, поинты или сантиметры, но и в относительных – в процентах, em или rem. Использование относительных единиц измерения также помогает придерживаться стандартов доступности.

В большинстве браузеров по умолчанию установлен размер шрифта 16px. Это значение можно использовать при расчетах (например, 16px равны 1em, 1rem или 100%).

Давайте рассмотрим, какие же относительные единицы измерения у нас есть.

  • % – измерение в процентах.
  • em – размер шрифта относительно обычного, т. е., если шрифт имеет размер 2.5em, значит, он в 2,5 раза больше обычного шрифта.
  • rem – размер шрифта относительно корневого элемента документа.
  • ch – ширина символа «0». В моноширинных шрифтах, где все символы имеют одинаковую ширину, 1ch это ширина одного символа.
  • ex – x-высота текущего шрифта, измеряется в высоте символа «х» в нижнем регистре.

See the Pen CSS Relative Units by Matthias (@fullstack-to) on CodePen.

Чем отличаются em и rem?

Разница между этими единицами в наследовании. Значение rem основывается на корневом элементе (html). Каждый дочерний элемент в качестве основы для вычислений использует размер шрифта элемента html.

А в единицах em вычисления основаны на размере шрифта родительского элемента.

rem очень упрощает вычисления размеров шрифтов. Если размер шрифта в элементе не зависит от размера шрифта родителя, это очень удобно, например, для вложенных элементов или даже нескольких вложенных элементов, таких как списки. Единицы rem всегда вычисляются относительно размера шрифта в теге html.

Различные семейства шрифтов

Все представленные на картинке шрифты имеют один размер (18pt), но благодаря красной линии видно, что x-высота (ex) у этих шрифтов разная.

На этой картинке шрифты имеют все тот же одинаковый размер (18pt). Но они отличаются шириной, т. е., их размер в единицах ch будет разным. Символы моноширинных шрифтов имеют одинаковую ширину, а в serif или sans-serif символы отличаются по ширине (например, «i» будет уже, чем «o»).

Абсолютные единицы измерения

Абсолютные единицы измерения имеют фиксированный размер (нельзя же принять какой-то свой размер сантиметра). Если в вашем случае требуется указать точную длину, вам нужны абсолютные единицы измерения. Например, это подходит для элементов, размер которых не должен меняться. Также абсолютные единицы могут быть полезны, если вы хотите определить ограничения для каких-то областей, чтобы они не могли стать слишком широкими или слишком узкими. Те элементы, размеры которых вы задаете в абсолютных величинах, не меняются в зависимости от размеров экрана, ориентации в пространстве и прочих вещей.

  • cm – сантиметры. 1 cm = 1 cm
  • mm – миллиметры. 10 mm = 1 cm
  • in – дюймы (inches). 1 in = 96px = 2.54 cm
  • px – пиксели. 1 px = 1/96 от 1 in
  • pt – поинты (points). 1 pt = 1/72 от 1 in
  • pc – пайки (пики, англ. pica). 1pc = 12 pt

See the Pen CSS Absolute Units by Matthias (@fullstack-to) on CodePen.

Единицы измерения области просмотра (viewport-единицы)

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

  • vw – 1% от ширины области просмотра (50% это половина ширины области просмотра).
  • vh – 1% от высоты области просмотра (50% это половина высоты области просмотра).
  • vmin – 1% от меньшего размера ширины или высоты области просмотра (т. е., если ширина меньше высоты, то vmin рассчитывается от ширины, при этом 1 vmin = 1 vw).
  • vmax – 1% от большего размера ширины или высоты области просмотра (т. е., если высота больше ширины, то vmax рассчитывается от высоты, при этом 1 vmax = 1 vh).

See the Pen Viewport Units by Matthias (@fullstack-to) on CodePen.

vmin и vmax могут изменяться в зависимости от изменения размера окна браузера или смены ориентации мобильного телефона.

Подробное объяснение px, em, rem в css

Введение в концепцию:

1. px (пиксель, пиксель):

Это виртуальная единица длины, единица длины цифрового изображения компьютерной системы. Если пиксели необходимо преобразовать в физическую длину, необходимо указать точность DPI (точек на дюйм, пикселей на дюйм). Как правило, DPI не является обязательным при сканировании и печати. В системе Windows по умолчанию установлено 96 точек на дюйм, а в системе Apple — 72 точки на дюйм.

2. em (единица относительной длины относительно размера шрифта текста в текущем объекте):

Это относительная единица длины, первоначально относящаяся к ширине буквы M, отсюда и название em. Теперь он относится к кратной ширине символа, использование аналогично процентному соотношению, например 0.8em, 1.2em, 2em и т. Д. Обычно 1em = 16 пикселей.

3. pt (пункт, фунт):

Это единица физической длины, которая составляет 72 дюйма дюйма. pt = 1/72 (дюйм), px = 1 / dpi (дюйм)

4.
rem (корень em, корень em):

Это новая относительная единица CSS3, которая привлекла всеобщее внимание. В чем разница между этим устройством и em? Разница в том, что при использовании rem для установки размера шрифта для элемента это все еще относительный размер, но относительным является только корневой элемент HTML. Можно сказать, что этот модуль обладает преимуществами относительного и абсолютного размеров. Благодаря ему все размеры шрифтов можно регулировать пропорционально только путем изменения корневого элемента, и можно избежать цепной реакции послойной комбинации размера шрифта. В настоящее время rem поддерживают все браузеры, кроме IE8 и более ранних версий. Для браузеров, которые его не поддерживают, решение также очень простое — написать объявление абсолютной единицы. Эти браузеры игнорируют размер шрифта, установленный с помощью rem.

1. Проблема em и px

Что такое px?

px пиксели (пиксель). Единица относительной длины. Пиксель px относится к разрешению экрана монитора. (Цитируется из руководства CSS2.0)
em — единица относительной длины. Относительно размера шрифта текста в текущем объекте. Если текущий размер шрифта текста в строке не был установлен вручную, он соответствует размеру шрифта браузера по умолчанию. (Цитируется из руководства CSS2.0)
Функции PX

  1. IE не может настроить размер шрифта, который использует пиксель как единицу измерения;
  2. Причина, по которой большинство зарубежных веб-сайтов можно настраивать, заключается в том, что они используют em или rem в качестве единицы шрифта;
  3. Firefox может настраивать px, em и rem, но более 96% китайских пользователей сети используют браузер IE (или ядро).
Что это такое?

em обозначает высоту шрифта. Высота шрифта по умолчанию любого браузера составляет 16 пикселей. Следовательно, нескорректированные браузеры соответствуют: 1em = 16px. Тогда 12px = 0,75em, 10px = 0,625em. Чтобы упростить преобразование font-size, вам нужно объявить Font-size = 62,5% в селекторе тела в css, что делает значение em 16px * 62,5% = 10px, поэтому 12px = 1. 2em, 10px = 1em, также Другими словами, вам нужно только разделить исходное значение в пикселях на 10, а затем заменить его на em в качестве единицы.

em особенности:

1em относится к размеру шрифта, он наследует размер шрифта родительского элемента, поэтому это не фиксированное значение. Размер шрифта по умолчанию любого браузера составляет 16 пикселей. Следовательно, 12px = 0,75em. В практических приложениях, чтобы облегчить преобразование, стили обычно устанавливаются следующим образом:
Код CSS

html { font-size: 62.5%; }

Таким образом, 1em = 10px. Теоретически размер 1.2em, который мы обычно используем, составляет 12 пикселей. Однако это преобразование недопустимо в браузере IE. 1.2em будет немного больше 12 пикселей. Решение состоит в том, чтобы изменить стиль тега html с 62,5% на 63%, а именно:
Код CSS

html { font-size: 63%; }

В китайских текстах обычно бывает два пробела в начале абзаца. Если вы используете пиксель в качестве единицы измерения, вам нужно оставить 24 пикселя для шрифтов 12 пикселей и 28 пикселей для шрифтов 14 пикселей . .. Это преобразование очень необычно. Если используется единица em, эта проблема может быть решена очень хорошо: размер одного слова — 1em, а размер двух слов — 2em. Поэтому просто определите это так:
Код CSS

p { text-indent: 2em; }

Разница между шрифтовыми единицами em и px

Блок шрифта должен использовать em вместо px. Причина в том, что он поддерживает масштабирование шрифта в IE6. Нажмите ctrl + wheel на странице, и веб-сайт, шрифт которого в px, не отвечает. px — это абсолютная единица измерения и не поддерживает масштабирование IE, em — относительная единица.
Когда я настраивал этот блог, я обнаружил, что не только шрифт, но и единицы высоты строки и высоты по вертикали — em. Обеспечьте целостность при масштабировании.

em имеет следующие характеристики:
  1. Значение em не фиксировано;
  2. em унаследует размер шрифта родительского элемента.
Em, переписывая шаги:
  1. Селектор тела объявляет размер шрифта = 62,5%;
  2. Разделите исходное значение в пикселях на 10 и замените его на em в качестве единицы;
    Проще говоря, если вам нужны только два вышеуказанных шага для решения проблемы, никто не может использовать px. После двух шагов, описанных выше, вы обнаружите, что шрифт вашего веб-сайта выходит за рамки воображения. Поскольку значение em не фиксировано и наследует размер родительского элемента, вы можете установить размер шрифта в div содержимого равным 1,2em, что составляет 12 пикселей. Затем вы устанавливаете размер шрифта селектора p равным 1.2em, но если p является дочерним элементом содержимого, размер шрифта p не равен 12px, а 1.2em = 1.2 * 12px = 14.4px. Это связано с тем, что размер шрифта содержимого установлен на 1,2em, это значение em наследует размер тела его родительского элемента, который составляет 16 пикселей * 62,5% * 1,2 = 12 пикселей, а p — его дочерний элемент, em наследует высоту шрифта содержимого , Что составляет 12 пикселей. Таким образом, 1.2em p больше не 12px, а 14.4px.
  3. Пересчитайте значения em для увеличенных шрифтов. Избегайте повторного объявления размера шрифта, то есть избегайте явления 1,2 * 1,2 = 1,44, упомянутого выше. Например, если вы объявляете размер шрифта 1. 2em в #content, то при объявлении размера шрифта p вы можете использовать только 1em вместо 1.2em, потому что этот em не тот em и наследует высоту шрифта #content. Он становится 1em = 12px.
12px китайские иероглифы в IE:

При завершении преобразования em было обнаружено странное явление, то есть размер 12 пикселей (1,2 em) китайских иероглифов, полученных указанным выше методом, не равен размеру шрифта, определенному напрямую с помощью 12 пикселей в IE, а немного больше. Вам нужно всего лишь изменить 62,5% на 63% в селекторе тела, чтобы оно отображалось нормально. Причина может заключаться в том, что когда IE обрабатывает китайские символы, точность значений с плавающей запятой ограничена. Это явление встречается только в китайских иероглифах размером 12 пикселей, а в английском такого явления нет. Решение — заменить 62,5% в style.css на 63%.

Инструмент преобразования единиц измерения px, em, pt:

адрес:http://pxtoem.com/

2. Особенности rem

Rem — это новая относительная единица (root em) в CSS3, которая привлекла всеобщее внимание. В чем разница между этим устройством и em? Разница в том, что при использовании rem для установки размера шрифта для элемента это все еще относительный размер, но относительным является только корневой элемент HTML. Можно сказать, что этот модуль обладает преимуществами относительного и абсолютного размеров. Благодаря ему все размеры шрифтов можно регулировать пропорционально только путем изменения корневого элемента, и можно избежать цепной реакции послойной комбинации размера шрифта. В настоящее время rem поддерживают все браузеры, кроме IE8 и более ранних версий. Для браузеров, которые его не поддерживают, решение также очень простое — написать объявление абсолютной единицы. Эти браузеры игнорируют размер шрифта, установленный с помощью rem.
Пример:

p {font-size:14px; font-size:.875rem;}

нота:
Выбор единицы шрифта для использования в основном определяется вашим проектом. Если ваша пользовательская база использует последнюю версию браузера, рекомендуется использовать rem. Если вы хотите учитывать совместимость, используйте px или оба.

3. Таблица преобразования шрифтов

Размер шрифтаptpxem
№ 142pt56px3.5em
Сяочу36pt48px3em
34pt45px2.75em
32pt42px2.55em
30pt40px2.45em
29pt38px2.35em
28pt37px2.3em
27pt36px2.25em
Номер один26pt35px2.2em
25pt34px2.125em
Маленький24pt32px2em
Номер два22pt29px1.8em
20pt26px1. 6em
Кодзи18pt24px1.5em
17pt23px1.45em
Номер три16pt22px1.4em
ми15pt21px1.3em
14.5pt20px1.25em
Номер четыре14pt19px1.2em
13.5pt18px1.125em
13pt17px1.05em
Маленькая четверка12pt16px1em
11pt15px0.95em
Номер пять10.5pt14px0.875em
10pt13px0.8em
Маленькая пятерка9pt12px0.75em
8pt11px0.7em
Номер шесть7.5pt10px0.625em
7pt9px0. 55em
маленькая шестерка6.5pt8px0.5em
Номер семь5.5pt7px0.4375em
Номер восемь5pt6px0.375em

Что такое взаимодействие с продуктом (PX)?

Глоссарий / P / Опыт продукта (PX)

Что такое опыт продукта?

Product Experience (PX) — это путешествие клиента внутри продукта. PX похож на пользовательский опыт, однако опыт продукта относится к общему опыту клиента с продуктом, от начала до конца. В индустрии программного обеспечения взаимодействие с продуктом (PX) относится к той части пути клиента, которая происходит в приложении.

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

Для более традиционных компаний сосредоточение внимания на взаимосвязи между веб-приложением или мобильным приложением и более крупными бизнес-целями обычно является частью стратегии цифровой трансформации. Здесь ориентация на опыт работы с продуктом — это то, как компании любого размера проводят значимую трансформацию и в полной мере используют преимущества цифровых продуктов в рамках своих инициатив по модернизации и становятся более ориентированными на данные и клиентоориентированными.

Чем взаимодействие с продуктом отличается от взаимодействия с пользователем?

В то время как пользовательский опыт (UX) касается конкретных взаимодействий пользователя с продуктом, PX более широко рассматривает весь путь клиента в продукте. Во многих продуктах SaaS весь путь клиента от пробной версии до покупки и продления происходит внутри продукта. Таким образом, продуктовые команды должны думать не только об удобстве использования, но и о том, как продукт может облегчить каждый этап пути и гарантировать, что клиенты осознают постоянную ценность.

Например, чтобы улучшить качество своего продукта, RE/MAX автоматизировала адаптацию и обучение агентов в приложении для своей новой CRM и использовала аналитику продукта для отслеживания использования и внедрения с течением времени. Таким образом, команда управления продуктом смогла продолжить итерацию этого опыта внутри продукта и могла лучше определить, куда инвестировать в дополнительное обучение и поддержку.

Почему важен опыт работы с продуктом?

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

Но большинство компаний не понимают, как пользователи извлекают пользу или где они сталкиваются с трудностями внутри приложения. Согласно отчету Pendo о внедрении функций за 2019 год, это означает, что до 80% функций SaaS практически не используются, что оценивается примерно в 30 миллиардов долларов на потраченные впустую исследования и разработки — явный признак неоптимального опыта продукта.

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

  • Адаптация новых пользователей: Сосредоточьтесь на готовности и вовлеченности клиентов. Автоматизируйте пошаговые руководства и руководства в приложении, направляя персонализированные сообщения на основе использования и отзывов.
  • Стимулирование внедрения продукта: Разработка сегментированного пути клиента. Понимайте и измеряйте поведение пользователей с помощью ретроактивной аналитики продукта и пользовательской аналитики. Используйте всплывающие подсказки, чтобы выделить функции, где и когда они необходимы.
  • Преобразование и удержание клиентов: Повышение уровня здоровья и удовлетворенности пользователей. Улавливайте текущие настроения и своевременную обратную связь с помощью опросов и анализируйте воронки по когортам и взаимодействиям.
  • Содействие расширению и росту: Сосредоточьтесь на использовании и адвокационном поведении. Запускайте целенаправленные кампании по расширению прямо в приложении и выявляйте, воспитывайте и поощряйте чемпионов.
  • Планирование и инновации: Определите, что строить дальше, исходя из потребительского спроса. Расширьте возможности продукта на основе отзывов и запросов, сегментированных по пользовательским и поведенческим данным.

Где я могу узнать больше об опыте работы с продуктом?

Для тех, кто хочет немного углубиться в управление взаимодействием с продуктом, есть ряд книг по смежным темам, в том числе «Схема цифровой трансформации» Дэвида Роджерса, «Цифровая смерть» Доминика Маццоне и «Leading Digital» Джорджа Вестерман, Дидье Бонне и Эндрю Макафи. Coursera также предлагает онлайн-курсы по цифровой трансформации в партнерстве с Boston Consulting Group, а Pendo опубликовал полезные ресурсы о том, как взаимодействие с продуктом связано с UI/UX и как руководство на основе данных может улучшить взаимодействие с продуктом.

Готовы повысить качество обслуживания клиентов и бизнеса?

Узнать больше

Что означает PX?

Аббревиатура » Термин

Термин » Аббревиатура

Слово в термине

#ABCDEFGHIJKLMNOPQRSTUVWXYZ НОВЫЙ

Термин

Определение

Опции

Рейтинг

PX

По рецепту

9 Физиология »0003

 Rate it:
PX

Prognosis

Medical » Physiology

 Rate it:
PX

Praxair, Inc. 0003

Governmental » NASA

 Rate it:
PX

Post Exchange

Governmental » Military

 Rate it:
PX

Педро Хименес

Сообщество » Знаменитости

 Оценить:
PX

Physical eXamination

Medical » Physiology

 Rate it:
PX

Probability of X

Academic & Science » Mathematics

 Оценить:
PX

Первичный индекс базы данных (Paradox)

Вычисления » Расширения файлов

 Rate it:
PX

Phoenix Field Office

Governmental » FBI Files

 Rate it:
PX

Внеземная планета

Академия и наука » Астрономия

 PX

Pachydermatous Xerasia

Medical » Physiology

 Rate it:
PX

Portsmouth And X

Miscellaneous » Unclassified

 Оценить:
PX

Пиксель

Разное » Единица измерения

 Rate it:
PX

Price

Business » Accounting

 Rate it:
PX

Partner X

Miscellaneous » Unclassified

 Оценить:
PX

Разное Давление X

30003

Rate it:
PX

Procedure Code

Medical » Nursing

 Rate it:
Px

Проституция

Правительственный » Полиция

 Оценить:
Rate it:
PX

Phone interview

Governmental » Bureaus

 Rate it:
PX

Руководитель проекта

Бизнес » Род занятий и должности

 Оценить: