Как создать мобильную версию сайта

Если вам требуется поменять на мобильном именно верстку, то есть HTML-разметку, то вы можете поместить ее в отдельный блок, например для хедера (аналогично - для прочих крупных блоков, которые будут отличатьтся от десктопной версии). Этот блок будет скрываться на больших разрешениях через свойство display: none, и показываться на мобильных через display: block. Соответственно, блок с десктопной версией также придется обернуть в обертку, скрывать его на мобильных и показывать на десктопе.

@media  screen and (min-width: 525px) { 
  .header-pc { 
    display: block 
  } 
  .header-mobile { 
    display: none 
  } 
} 
 
@media  screen and (max-width: 525px) { 
  .header-pc { 
    display: none 
  } 
  .header-mobile { 
    display: block 
  } 
}

<div class="header-pc">Header On PC</div> 
<div class="header-mobile">Header on Mobile</div>

Однако это достаточно "костыльное" и некрасивое решение. Правильнее было бы изначально построить разметку страницы так, чтобы в зависимости от разрешения часть блоков можно было скрыть, а часть - расположить на странице иначе. В этом смысл адаптива и его отличие от респонсива: адаптивная страница перестраивает свою структуру средствами CSS в зависимости от разрешения экрана, то есть это именно, как вы говорите, кардинально различающиеся страницы визуально, хотя их разметка остается неизменной на всех разрешениях.

CSS для мобильных назначаетcя через медиазапросы либо с использованием css-фреймворков вроде Bootstrap.

Наверняка встречали поддомены сайтов, к примеру vk.com, а есть m.vk.com. При переходе на сайт с поддоменом m.vk.com у вас открывается "мобильная версия" сайта. Что вам нужно чтобы реализовать данный функционал:

• Правильная маршрутизация на веб-сервере, который вы используете.
• Лучше всего создать отдельный проект, если вы хотите сделать полностью отличную стилизацию от "родительского сайта".
• Продумать дизайн мобильной версии
• Собрать проект.
• Настроить все редиректы, если веб-сервер обнаруживает что это мобильное устройство, к примеру, вы заходите с телефона на сайт vk.com, установленный и правильно настроенный веб-сервер перенаправляет вас на мобильную версию(ваш поддомен) m.vk.com, на desktop такого происходить не должно.

Я согласен с Лебедевым в этом вопросе

Самая большая глупость на свете — создание отдельных мобильных версий сайтов.

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

— Смотрите! Мы берем обычный айфон. Заходим на ваш сайт. И что видим? Обычный сайт? Это же ужасно. Смотрите, как это работает у банка N. У них открывается специально разработанная мобильная версия! Из трех кнопок!

— Мари-Изабель, подпишите контракт с молодыми людьми.

Еще раз повторим для невнимательно прочитавших первое предложение: самая большая глупость на свете — создание отдельных мобильных версий сайтов.

Делать мобильные версии сайтов есть смысл только за деньги тех, кому некуда деньги девать.

Чем хорош современный смартфон? Тем, что это практически полноценный компьютер. Он умеет все. В том числе — нормально показывать сайты. Спрашивается, если телефон нормально показывает сайт, зачем что-то еще изобретать? Через телефон все отлично видно.

В качестве доказательства того, что мобильные версии сайтов никому не нужны, можно привести в пример компанию «Эппл». Они все это придумали, сделали айфоны и айпады. И их собственный сайт открывается на всех их устройствах так же, как на любом обычном компьютере. Безо всяких мобильных версий.

Ну а если уж нужно как-то отдельно работать через смартфоны, то нужно писать под них приложения, работающие с API ресурса