iNext10
@iNext10
Web Developing (Front End) Junior

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

Я имею небольшой опыт в вёрстке сайтов, но у меня до сих пор плохо получается верстать с адаптивом.

Как нужно грамотно начинать верстать сайт? Сначала под разрешение мобильных устройств, а далее по возрастанию?
  • Вопрос задан
  • 399 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus
Mother is a god in the eyes of a child.
Нет единого решения данной задачи. Есть только опыт, время, скиллы, стремление решить задачу как можно лучше и менее затратно.

Лично я верстаю сначала для Full и уже потом для Mobile, но, прежде всего я проверяю сразу все детали на адаптивность, т.е по разным "комнатам" разбрасываю карточки, меню, кнопочки и т.д и проверяю как они будут выглядеть на мобильниках. В переменных сразу указываю нужные параметры и возвращаюсь к верстке Full, зная что я могу верстать спокойно спускаясь вниз, и меня не будет ждать мучение на последних шагах.

Достаточно добавить один класс с переменными, и на разных разрешениях менять внутренние параметры, вкладывая класс с содержимым в медиа запрос. Пример:

Сначала объявляем переменные внутри родительского класса и задаём параметры по умолчанию:

.main-styles {
  --main-bgcolor: #c0ff00;
  --block-width: 500px;
  --block-height: 500px;
}


Применяем переменные для какого-нибудь элемента, который является потомком блока с классом: main-styles, например так:

.icon {
  width: var(--block-width);
  height: var(--block-height);
  background: var(--main-bgcolor);
  border-radius: 50%;
}


С помощью медиа запроса, мы можем поменять параметры в переменных, тем самым не создавая мусор в стилях, используя для изменения параметров всего лишь один класс:

@media (max-width: 900px) {
  .main-styles {
    --main-bgcolor: #ff00e0;
    --block-width: 200px;
    --block-height: 200px;
  }
}

@media (max-width: 700px) {
  .main-styles {
    --main-bgcolor: green;
    --block-width: 150px;
    --block-height: 150px;
  }
}

@media (max-width: 500px) {
  .main-styles {
    --main-bgcolor: red;
    --block-width: 100px;
    --block-height: 100px;
  }
}


Самый обычный пример с использованием всего того что я описал в ответе:



Поиграйте с окном песочницы(уменьшая ширину окна), чтобы увидеть смену параметров.

Итог:

Устанавливаем изменяемые параметры в переменные, и затем на нужных брейкпоинтах меняем свойства этих параметров, через основной класс - который будет содержать важные переменные, т.е в нашем случае, этот класс имеет имя: main-styles.

Пример достаточно простой, но я думаю вы уловили смысл. Вместо смены +50 свойств в разных классах, вы можете просто поменять значение переменных - одного класса, что намного упрощает разработку и очищает файл css от лишнего хлама.

Сначала под разрешение мобильных устройств, а далее по возрастанию?


С течением времени - экраны мобильных устройств увеличиваются и в итоге получается что к примеру блок с шириной в 300px который нормально отображался на устройстве с шириной экрана в 350px, будет выглядеть как-то не очень, когда наименьшая ширина устройства будет равна допустим 500 пикселям, а устройства с шириной в 350px забудутся и уже не будут актуальны. ИМХО.

Каждый шаг. Каждое действие. Должны быть продуманы на несколько шагов вперёд. Веб-разработка - это как игра в шахматы. Если ты не продумаешь свои ходы и стечение обстоятельств на несколько шагов вперёд, ты можешь запросто проиграть.

Дополнительно:

1. Используйте препроцессоры или CSS переменные.
2. Активно пользуйтесь и изучайте: Flexbox и CSS Grid.
3. Не стесняйтесь использовать медиа запросы, но в меру, не слишком увлекайтесь.
4. Пытайтесь оставлять свободное место/воздух. Зажатые элементы, выглядят не очень, хотя это мало кем учитывается.
5. Используйте нормальные, понятные, и удобные имена для нейминга классов CSS.

Удачи.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
Lord_Dantes
@Lord_Dantes
муз. канал t.me/blackstreet69th
Как правильно начинать верстать адаптивный сайт?

Правильно, это так чтобы вы приложили минимальное кол-во усилий чтобы сделать сайт адаптивным.
А каким способом вы сами решаете.

Сначала под разрешение мобильных устройств, а далее по возрастанию?

Нет, верстайте сначала под свой экран, потом адаптируйте уже по убиванию.

Я например на флексах делал сайт, и адаптив почти на все устройства занял у меня 90 строчек CSS-кода.
Я не говорю что чем меньше строк тем лучше.
Ответ написан
Eugevin
@Eugevin
20 лет, frontend как смысл жизни
Правильно начать верстать адаптивный сайт (в современных мерках) - это использовать rem и em, активничать с процентами в width и height, ну и использовать "max-min" перед этими свойствами.

По поводу "сначала на мобилках, потом десктоп" - не согласен (смысла в этом нет, ибо media-quaries все равно будешь использовать и проще скрыть некоторый контент на мобилках через display: none, чем париться с мобильно>пекашной адаптацией). Единственное что необходимо - максимально разгрузи проект от тяжелых картинок и неминифицированного повторяющегося кода.
Ответ написан
@RuComMarket
Битрикс FullStack разработчик
в теории вы правы, сначала верстается мобилка, это позволяет исключить подгрузку мусора на мобилку, что увеличивает скорость и показатели по пэйджспиду, но на практике такое встречается редко, чаще делают сначала full, а затем на уменьшение. В принципе первоначальный full не считается не правильным решением, т.к. все равно по СЕО надо отдавать все теги включая скрытые, иначе будет считаться разный контент и можно получить бан.
Ответ написан
danil_polyanskiy
@danil_polyanskiy
Junior Front-End Developer
Первым делом сделайте мобильную, но не только под одно разрешение, а под каждое, а уже потом делайте для широких экранов. Мобильные есть не только 1280x720, есть также айфон 5-й, у которого экран как яблоко, а есть айфон 11-й, который размером как ананас. Так что первым делом разберитесь со всеми мобильными экранами, а уже потом с остальными.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы