Поддержка веб-браузера для точки

Question

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

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

Я хотел использовать точки для определения размеров вещей, поскольку точка по определению составляет 1/72 дюйма. Так что я должен быть в состоянии сделать что-то 72pt и ожидать, что это будет дюйм, однако это не похоже на правду.

Кто-нибудь знает, как заставить эту работу работать правильно?

Answer 1

Попробуйте использовать 'em' вместо точек или пикселей.Установите font-size: 62.5%; на теге body, затем для всех остальных элементов 1em = 10px, 1.2em = 12px.

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

Дэн Седерхольм написал превосходную книгу с этой техникой