Почему em гибче чем px?

Question

damarkuzz @damarkuzz

Почему em гибче чем px?

Никогда не пользовался em, rem. Недавно совершенно случайно попробовал поиграться со значениями em/rem и выяснил для себя, что с их помощью можно более гибко настраивать размер шрифта.
Например, мы можем сделать font-size 1.55em, 1.68 и.т.п и каждое из дробных значений будет делать изменять размер шрифта на экране.
Почему px не такие гибкие? Почему нельзя указать 15.54px?

Вопрос задан более трёх лет назад
186 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

iBird Rose @iiiBird Куратор тега CSS

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

Написано более трёх лет назад
Алекс Глебов @SkiperX Куратор тега CSS

тут есть объяснение
https://youtu.be/_63sz4aHrFo

Написано более трёх лет назад
WapSter @wapster92 Куратор тега CSS

С чего, ты взял, что нельзя можно. Только браузер их округлит, если dpi устройства не позволяет отобразить, тоже самое произойдет и rem % и прочими единицами измерения после конвертации в px.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

10 комментариев

DevMan @DevMan

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

Написано более трёх лет назад
Сергей Яковлев @sergeyakovlev
DevMan,

скажите как увидеть полпикселя на экране?

Скриншот экрана мобилы и увеличить. Не? Хотя, на мобиле и так видно. Или увеличить масштаб в браузере на обычном экране.

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, width=device-width"> <style> div.thickness--half { border: .5px solid #000; } div.thickness--full { border: 1px solid #000; } </style> </head> <body> <div class="thickness--half">Halft Thickness</div> <br> <div class="thickness--full">Full Thickness</div> </body> </html>

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

Конечно же, речь о виртуальных пикселях на экранах с высокой плотностью. На обычных экранах виртуальный пиксель равен реальному и половинку никак не увидеть.
Написано более трёх лет назад
DevMan @DevMan

Сергей Яковлев, я кагбе о том, что нельзя дать размер в полпикселя.

Написано более трёх лет назад
Сергей Яковлев @sergeyakovlev

DevMan, Ну как же нельзя? Вон, в коде выше указано — толщина рамки полпикселя. И всё прекрасно отображается на экранах с высокой плотностью пикселей (физических).

Написано более трёх лет назад
DevMan @DevMan

Сергей Яковлев, окей, покажите мне реальных полпикселя на любом экране, без оговорок про хайдпи.

Написано более трёх лет назад
Сергей Яковлев @sergeyakovlev

DevMan, Почему, без оговорок? У меня во всех ответах этого треда указано, что это про виртуальные пиксели, которыми оперирует CSS. Ситуация, когда виртуальный пиксель равен физическому — всего лишь частный случай.

Написано более трёх лет назад
DevMan @DevMan

Сергей Яковлев, потому что хайдпи - не единственный возможный вариант.

Написано более трёх лет назад
Сергей Яковлев @sergeyakovlev

Написано более трёх лет назад
Сергей Яковлев @sergeyakovlev

DevMan,

потому что хайдпи - не единственный возможный вариант.

И что? Вопрос был, как увидеть. Ну вот, пожалуйста.

Написано более трёх лет назад
DevMan @DevMan

Сергей Яковлев, рили?
или это попытка отстоять своё любым способом, несмотря на то, что мы говорим о разном?

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- 2 часа назад
- 27 просмотров
1

ответ
HTML

+1 ещё

Простой
Как Выделить слово приходящая из базы определенным цветом?
- 1 подписчик
- 2 часа назад
- 86 просмотров
0

ответов
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 21 час назад
- 47 просмотров
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 22 часа назад
- 53 просмотра
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 49 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- вчера
- 38 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- вчера
- 85 просмотров
2

ответа
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- вчера
- 85 просмотров
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 23 апр.
- 709 просмотров
2

ответа
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- 23 апр.
- 2310 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Frontend React

Glob-com

от 100 000 ₽

Разработать дизайн продающего лендинга

25 апр. 2024, в 14:21

15000 руб./за проект

Шаблон WP - настройка

25 апр. 2024, в 14:07

20000 руб./за проект

Разработать ER-модель и модель процессов

25 апр. 2024, в 14:06

2500 руб./за проект

ну раз не видишь преимуществ - значит рано еще и не встретился с ситуациями, когда бы они пригодились. используй px. потом с опытом и дойдешь
тут есть объяснение
https://youtu.be/_63sz4aHrFo
С чего, ты взял, что нельзя можно. Только браузер их округлит, если dpi устройства не позволяет отобразить, тоже самое произойдет и rem % и прочими единицами измерения после конвертации в px.

Answer 1 · 2020-12-09 22:32:43

:root {
    font-size: 16px; // 1rem = 16px
}
div {
    padding: .5rem; // 8px
}

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

rem — базовый размер шрифта;
em — текущий размер шрифта;
px — виртуальный пиксель.

Полпикселя легко можно увидеть на экранах с высокой плотностью. Те же мобильники с экраном 1920×1080px (реальных) имеют меньше виртуальных пикселей (используемых в CSS). Т. е., на один виртуальный (программный) пиксель приходится несколько реальных пикселей.

Почему em гибче чем px?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт