Как сделать так, чтобы можно было менять сайт на телефоне, но при этом ничего не должно меняться на компьютере?

Существует множество способов сделать сайт адаптивным для мобильных устройств. Однако, некоторые из этих способов приводят к тому, что при изменении макета на телефоне, меняется и макет на компьютере. Ниже мы рассмотрим несколько способов, которые помогут избежать данной проблемы.

Использование медиа-запросов

Один из самых распространенных способов сделать сайт адаптивным - использование медиа-запросов. Медиа-запросы позволяют применять стили к элементам в зависимости от различных параметров, таких как размер экрана устройства.

Рекомендуется создавать два файла со стилями - один для десктопной версии, другой для мобильной. Для мобильной версии настраиваем медиа-запросы, которые не будут влиять на десктоп.

/* Десктопная версия */
@media (min-width: 768px) {
  /* Стили, применяемые только для устройств с шириной экрана не менее 768 пикселей */
}

/* Мобильная версия */
@media (max-width: 767px) {
  /* Стили, применяемые только для устройств с шириной экрана менее 768 пикселей */
}

Использование относительных единиц измерения

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

.container {
  width: 80%; /* Установка ширины блока в 80% от ширины родительского элемента */
  padding: 1em; /* Установка внутреннего отступа блока в 1 em */
}

Использование мобильного меню

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

Использование фиксированных позиций

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

.header {
  position: fixed; /* Закрепление блока "header" в верхней части экрана */
  top: 0;
  width: 100%;
}

Выводы

С помощью этих способов вы сможете создать адаптивный сайт, который будет корректно отображаться на мобильных устройствах и не будет изменяться на компьютере при изменении макета на телефоне. Использование медиа-запросов, относительных единиц измерения, мобильного меню и фиксированных позиций - все это поможет достичь этой цели.