Поддержка веб-браузера для пункта
Так что у меня проблема с адаптивным дизайном. Предполагается, что мы изменим дизайн для экранов разных размеров, чтобы мы представили лучший интерфейс для каждого из них.
Дело в том, что я не могу понять, как сделать это на основе пикселей. В конце концов, с медиа-запросами, основанными на пикселях, некоторые новые телефоны выглядят большими экранами, чем мои 40-дюймовые телевизоры. Очевидно, что это неправильно.
Я хотел использовать точки для определения размеров вещей, поскольку точка по определению составляет 1/72 дюйма. Так что я должен быть в состоянии сделать что-то 72pt и ожидать, что это будет дюйм, но это, похоже, не так.
У кого-нибудь есть идеи, как заставить это работать правильно?
1 ответ
Попробуйте использовать их, а не точки или пиксели. Установить font-size: 62.5%; затем в теге body для всех остальных элементов 1em = 10px, 1.2em = 12px.
Em являются относительными единицами, поэтому с настройками, описанными выше, все элементы должны масштабироваться идеально пропорционально размеру экрана. Просто будьте осторожны с вложенными элементами и общими правилами, так как вы можете иногда удваивать.
Дэн Седерхольм написал отличную книгу с этой техникой