Это не автоматическая операция. Не существует волшебной программы через который пропускаем HTML/CSS код неадаптивный и получаем на выходе красиво выглядящий на любых разрешениях сайт. Для начала в консоли браузера включаем имитацию мобильного устройства (например в Chrome она называется "панель инструментов устройства"). Там мы можем посмотреть как выглядит наш сайт при любом разрешении. Как выбрав одно из популярных мобильных устройств, так и плавно изменяя ширину и смотря на каких именно разрешениях наша верстка ломается или выглядит не должным образом. Благодаря этому инструменту это можно делать целиком на настольном ПК вообще не глядя на мобильные устройства и даже не имея их. Продумываем дизайн что и на каком разрешении должно измениться чтобы все нормально выглядело.
И пишем медиазапросы в нашем CSS. Синтаксис медиазапросов - здесь наверное не обойтись без справочника CSS. Хотя чисто синтаксически в них нет ничего сложного для человека который знает обычную неадаптивную верстку. Правильнее сказать что это трудоемко. Несколько подсказок для начала:
- кроме очевидных изменений шрифтов, ширины блоков и т.п. очень часто используется в медиазапросах показ и скрытие элементов. Т.е. какие-то блоки видны только на десктопных разрешениях, какие-то только на мобильных. А также изменение выравнивания флкесбоксов. Т.е. блоки которые на десктопе стоят в ширину, на мобиле перемещаются в одну колонку друг под другом.
- медиазапросы не надо стараться делать точно на разрешениях популярных устройств. Делайте, чтобы переключение происходило на разрешениях немного больше их.
- для верстки средней сложности и не супер-дизайнерского уровня (когда это требует дизайнер и деваться некуда) обычно достаточно 3-4 разрешений в общем. Условно: десктоп, планшет, телефон. Т.е. основные правила CSS и 2-3 разрешения для большинства медиазапросов. Иногда особо хитрые плотно заполненные информацией элементы приходится адаптивить отдельно с меньшим шагом. Но увлекаться этим особо не стоит. Обычно это применяется когда ломается верстка используемого на сайте стороннего компонента. Если на сайте такое приходится делать сплошь и рядом - наверное это сигнал того что стоит провести редизайн сайта в целом, в т.ч. и на десктопных разрешениях.
- Вообще когда медиазапрос для одного разрешения приближается к длине основного css кода, другими словами мы почти полностью переверстываем сайт на каждом разрешении - это одно из двух. Либо дизайнер гений креатива и сайт ждет победа на престижных конкурсах дизайна. Либо мало понимает в веб-технологиях. Ну например дизайном мебели занимался до этого. Вероятность каждого из вариантов решать вам :-)