Как правильно оптимизировать небольшие UI — элементы?
У меня еще относительно небольшой опыт в UI, вертке веб-страниц и их оптимизации под разные экраны и устройства. Сейчас столкнулась с таким вопросом.
Вот рисую я в Фотошопе макет веб-интерфейса. Административную панель, например. При рисовании отталкиваюсь от размера (разрешения) экрана монитора, за которым работаю. Далее, в соответствии с тем, какого размера элементы нарисованы на макете, я делаю верстку. Т. е., я обычно делаю так: кидаю изображение нарисованного макета в браузер, а в соседней вкладке у меня страница, которую верстаю. В работе все время переключаюсь между вкладками и сверяю размеры элементов, подгоняю так, чтобы они были одинаковыми. Получается один в один на моем экране. Затем, с помощью Google Chrome Inspector и Screenfly я прописываю медиа-запросы, чтобы подогнать интерфейс под другие размеры экрана и моб. устройства.
При верстке я использую обычно сетку Bootstrap, и мне примерно понятно, как оптимизировать блоки и изображения, например, чтобы на разных экранах они нормально смотрелись. Но что является лучшей практикой, чтобы оптимизировать под разные экраны и устройства текст (например, заголовки, ссылки, наименования кнопок) и такие небольшие элементы интерфейса как кнопки? Когда я анализирую какие-то веб-проекты и интерфейсы, готовые темы, то вижу, что размеры текста обычно пишут фиксированные (допустим, заголовку задают 16px) и не прописывают для разных экранов в медиа-запросах разные размеры текста. То же касается и кнопок и всяких небольших UI - элементов - фиксированные ширины-высоты или же паддинги для всех. При этом такие интерфейсы на разных экранах выглядят примерно одинаково, с адекватными размерами элементов.
Когда же я смотрю на свои интерфейсы на меньших экранах, с меньшим разрешением, то вижу несколько гиперболизированные какие-то заголовки и кнопки, нарушаются пропорции с общим дизайном. Из-за этого дизайн несколько видеоизменяется: блоки вынуждены больше в высоту растягиваться, элементы на следующие строчки переносятся и т. п. Я понимаю, что можно медиа-запросы использовать или приемы с vw для автоматической адаптации. Можно процентами все задавать. Но почему же в вышеупомянутых случаях были прописаны единожды просто обычные пиксели для всех ситуаций, и интерфейс выглядит достойно?
В чем же здесь дело? Я подозреваю, что на этапах верстки и оптимизации делаю что-то не так. Подскажите, пожалуйста, как правильно? Какова была бы лучшая практика, чтобы оптимизировать тексты и маленькие UI - элементы под разные экраны? Что я делаю неправильно в своей рутине разработки?
Нерон Лордов, 16px - это всего лишь цифра для примера. И это пример для небольших заголовков. В моем вопросе речь вообще идет о маленьких элементах интерфейса. По-моему, с большими все проще, а с маленькими куча нюансов.
Я, возможно, что-то неправильно понимаю, но когда я анализирую чужие готовые CSS, то не вижу, чтобы такие маленькие элементы как-то оптимизировались под разные экраны. Возможно, я чего-то не учитываю в общей картине оптимизации.
VioBee, по-моему, наоборот - с маленькими элементами всё проще, потому что они не переделываются под разные разрешения. А вот крупные - с ними как раз путанница, потому что на мобиле нужно экономить пространство, там нельзя оставлять крупные элементы без изменений.
Простой
Простой
