@tr0fa

Как научить браузер понимать единицу измерения «dp» ??

Когда начал изучать material design, возник вопрос, как научить браузер понимать такую единицу измерения как "dp". Немного проясню: имею в виду, как можно заставить браузер трансформировать dp из CSS скажем в px.

Гугл дает простую формулу: dp = (width in pixels * 160) / screen density, где
screen density = screen width (or height) in pixels / screen width (or height) in inches
Вроде бы ничего сложного, и все размеры можно получить обычным js. Но вот как подставить это в файл стилей, не пойму. То есть если я пишу в CSS файле: button { width: 32dp; }, JS вычесляет dp для моего экрана и заменяет 32dp к примеру на 180px. Зарание спасибо.
  • Вопрос задан
  • 1149 просмотров
Решения вопроса 1
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Для браузера 1px = 1dp, если в <head> страницы прописан
<meta name="viewport" content="width=device-width, initial-scale=1.0">


Т.е. браузер использует css-пиксели — это те же «dp», — которые на экранах преобразуются в device pixels: 1 css пиксель может равняться 2 пикселям экрана, когда сайт отображается на экране с двойной плотностью (множитель @2x) и т.д.

Ума не приложу, какую проблему вы пытаетесь решить. Но мне кажется, что вы наоборот создаете проблему. Не вижу смысла привязываться к ppi устройства, если только вы не делаете «экранную линейку».

«Dp» и формула пересчета предназначена скорее для дизайнеров, которые рисуют растровые картинки для сайтов и приложений. Но если вы верстаете с использованием svg, то у вас не возникнет никаких проблем. Делайте svg со множителем @1x, и в браузере всё правильно отмасштабируется.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
L0k1
@L0k1
ума не приложу, зачем вам в css использовать единицу измерения, которой там нет?! - ну да ладно
можете использовать препроцессор и загнать это все в миксин
Ответ написан
dzheka3d
@dzheka3d
а пробовали использовать еденицы vh и vw?
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы