Какие основные подходы (виды) к верстке веб-страниц существуют?

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

1. Ну, по тому, как эта хрень выглядит на разных экранах

• Фиксированная, она же Fixed Layout Это как в старые добрые, когда у всех мониторы были как телевизоры «Рубин». Ширину контейнера вбивали гвоздями в пикселях и ни шагу в сторону. На телефоне, значит, будет полоса прокрутки, а тебе — хуй с горы, терпи.

  .container { width: 960px; margin: 0 auto; }

  Типа «У меня тут 960 пикселей, и хоть трава не расти». Архаизм, блядь, но иногда всплывает.

• Резиновая, Fluid Layout Тут уже чуть-чуть мозги включили. Ширину задают в процентах, чтобы макет растягивался, как жопа после новогодних праздников. Но структура-то одна и та же, просто шире/уже.

  .container { width: 90%; max-width: 1200px; }
  .sidebar { width: 25%; }

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

• Адаптивная, Adaptive Layout А вот это уже интереснее. Тут верстальщик, как хирург, нарезает макет на контрольные точки — брейкпоинты. На каждом таком изломе макет резко, блядь, меняется. Типа «всё, с этого момента мы живём по-новому».

  /* Для телефонов, где пальцы как сосиски */
  .card { width: 100%; }
  @media (min-width: 768px) {
    /* Планшеты, уже можно две колонки */
    .card { width: 50%; }
  }
  @media (min-width: 1024px) {
    /* Десктоп, развернулись на полную */
    .card { width: 25%; }
  }

  Чётко, структурно, но иногда между точками бывают артефакты — как будто костюм куплен на размер больше.

• Отзывчивая, Responsive Layout А это, сука, золотая середина, современный must-have. Берёшь резиновую основу, чтобы всё плавно текло, и сверху накидываешь адаптивные медиазапросы в ключевых местах. Получается и плавно, и резко там, где надо. Красота, ёпта!

2. А ещё есть, блядь, методология — с какого конца начинать пилить

• Mobile First (Сначала мобильные) Это когда ты пишешь стили для маленького экрана, а потом, как богатый родственник, добавляешь плюшки для планшетов и десктопов через min-width. Логично, эффективно, все так советуют. Типа «сделал базу, а потом наращивай».

• Desktop First (Сначала десктоп) Обратный подход, старый, как мир. Делаешь всю красоту для большого экрана, а потом начинаешь через max-width всё это ужимать, резать и прятать для мобилок. Часто получается, что ты не добавляешь, а отнимаешь, и это, блядь, не всегда удобно.

А главный инструмент сейчас, чтобы не ебаться с этими float'ами и inline-block'ами — это CSS Grid и Flexbox. Это как перейти с топора на бензопилу. Сетки любой сложности, выравнивание как по маслу. Без них сейчас — просто мучение, в рот меня чих-пых.