Всем привет хочу рассказать как я делал простую адаптацию на CSS3.
Для чего вообще нужна адаптация на вашем сайте?
Адаптация делается под разные устройства или же разрешения экрана вашего монитора.
Создавая сайт и смотря постоянно на результат вы можете видеть что у вас все блоки лежат как вам захотелось их расположить.Но меняя разрешение вы получаете смещения и наложения элементов друг на друга что делает ваш сайт не читаемым.
Вот в пример сайт сделанный для разрешения 1366x768 при задании другого разрешения.
Что бы всё это исправить можно воспользоваться @media, я считаю что удобно располагать адаптацию в отдельном css файле и заново подключать к вашему html коду.
Вот ваш обычный css и берёте в нём вашу настройку элементов, у меня это различные id и class.
Теперь вставляете это в ваш новый css под тег @media таким образом
@media (max-width(отвечает за разрешение до которого будут работать заданные ниже параметры) далее указывает нужную вам ширину экрана в пикселях )
Теперь при разрешении 1360 пикселей и меньше ваш css будет принимать значения указанные в этом теге что делает ваш сайт доходящим под разные разрешения мониторов и делает читаемым пользователям на всех устройствах
Так же различные разрешения нужно указывать от большего к меньшему
Пример:1920>1600>1360>1280 и тд
Кому было полезно ставим лайки и подписываемся если нравится такой контент пишем что вас интересует ещё в создании вашего персонального сайта.