0

Как адаптировать сайт под все мобильные устройства?

Я адаптировал для примера под свой телефон с разрешением ширины 360, всё отображается, как мне нужно. Потом открыл на другом телефоне, там ширина экрана больше на 20 и всё поплыло, так как на это разрешение не прописаны медиа-запросы.

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

1
  • 1
    Для начала нужно определиться - что такое "как надо"
    – andreymal
    18 дек 2018 в 16:57

1 ответ 1

3
  1. Прописать правильный вьюпорт:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  2. Определиться с медиа-запросами - какие контрольные точки и в какую сторону использовать. Выбрать, какие именно разрешения нужны, а так же в какую сторону вы их применяете. Есть 2 основных подхода - mobile и desktop first. Это поможет избавиться от неразберихи какие стили что переназначают/перебивают на конкретной контрольной точке;

  3. Для мобилок использовать относительные величины для ширины, а не жесткие, как 360px. Например, всему сайту задать width: 100%; а контейнеру-центровщику width: 80%;. Но и контент внутри контейнера должен тянуться конечно же.

Несколько статей для изучения темы:

12
  • Относительные, вплане, проценты или vh?
    – Alex
    18 дек 2018 в 16:30
  • Пожалуйста, объясните, что означает второй пункт. Раскройте, если не сложно. Спасибо!
    – Alex
    18 дек 2018 в 16:31
  • медиа запросы это вот это @media (max-width: n){query} но они бывают разные почитайте в сети 18 дек 2018 в 16:39
  • @ПавелВаршавский я знаю, что такое медиа-запросы. Я попросил разъяснить, что означет "определиться с медиа-запросами и какие контрольные точки в какую сторону использовать"
    – Alex
    18 дек 2018 в 16:40
  • 1
    Например от 0 до 767 - мобилки, 768 до 1024 - десктоп и тд. От 0 до 767 полностью закроет необходимый диапазон 18 дек 2018 в 16:47

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.