Адаптивная верстка меняет дизайн страницы в зависимости от поведения пользователя, платформы, размера экрана и ориентации девайса и является неотъемлемой частью современной веб-разработки. Она позволяет существенно экономить и не отрисовывать новый дизайн для каждого разрешения, а менять размеры и расположение отдельных элементов.
Источник https://tproger.ru/translations/responsive-web-design-tips/
-
Старайтесь использовать относительные единицы для задания величин (%/em/rem).
-
Обращайте внимание на ширину контента на разным расширениях, особенно на больших — возможно лучше ограничить максимальную ширину для контента.
-
Добавляйте отступы для элементов-оберток, чтобы контент не прилипал к краям экрана на небольших расширениях.
-
Используйте безопасные брейкпоинты для медиа запросов, например из Bootstrap
- все что выше 1200 - большие десктопы
- между 992 и 1200 - маленькие десктопы, либо большие планшеты
- между 768 и 992 - планшеты
- между 576 и 768 - большие телефоны, либо телефоны в повернутом виде
- 576 и ниже - телефоны. Одни из распространенных сейчас размеров устройств - 375 (Iphone X) и 360 (большинство android-устройств). Правда, все больше и больше возрастает тенденция к увеличению телефонов, так что эти распространенные размеры могут и поменяться
-
Проверяйте как отображается ваш сайт на разных расширениях — для базового тестирования будет достаточно Toggle Device Toolbar, который вы можете найти в инструментах разработчика браузера Chrome https://developers.google.com/web/tools/chrome-devtools/device-mode