Проблемы с CSS и разрешениями экрана

Похоже, ваша цель состоит в том, чтобы ваш макет выглядел буквально одинаково при любом разрешении, что на самом деле непрактично. Помните, что изображения плохо масштабируются! Что делают большинство дизайнеров, так это используют проценты, где это возможно, чтобы позволить макету «течь», чтобы соответствовать большинству разрешений, оставаясь при этом привлекательным.

Если вы проанализируете (например) Stack Overflow. вы увидите, что это набор фиксированной ширины, центрированный в браузере. Apple делает то же самое с некоторыми художественными элементами, которые изящно отображаются при любой ширине окна. Это художественная проблема, и я не уверен, что на нее можно дать более ясный ответ.

Это полностью зависит от целей вашего дизайна.

Большинство дизайнеров используют области фиксированной ширины и размещают их по центру экрана.

В некоторых случаях вы можете использовать медиа-запросы CSS для применения определенных правил к разным типам и размерам экранов (поддержка браузеров ограничена).

Вы можете использовать min/max-width для обработки многих случаев, когда содержимое становится слишком большим или маленьким, но нет эквивалента для полей.

Графику SVG можно использовать для создания масштабируемых изображений, которые хорошо выглядят при любом разрешении.

Некоторые компании предоставляют совершенно отдельный сайт для мобильных пользователей.

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

Я обычно определяю эти стили в единицах em, которые относятся к размеру шрифта. Таким образом, увеличение размера текста пропорционально увеличивает отступы и поля.