По большому счёту адаптивная вёрстка это несколько версий CSS в одном файле под каждое нужное разрешение экрана. Только за место дублировать один и тот же код по нескольку раз, мы пишем какой-то основной код (к примеру под FullHD разрешения), а уже в таких конструкциях
@media only screen and (max-width: 480px) {
}
указываем только то, что нам нужно на каком-то разрешении поменять.
Пример:
body {
background: red;
}
.responsive-bloks {
width: 33.33%;
min-height: 1px;
float: left;
}
@media only screen and (max-width: 480px) {
body {
background: blue;
color: green; /* Обратите внимание что я не переписываю для другого разрешения все стили, а только меняю или добавляю то, что мне нужно что бы изменялось. */
}
.responsive-bloks {
width: 50%; /* Обратите внимание что я не переписываю для другого разрешения все стили, а только меняю или добавляю то, что мне нужно что бы изменялось. */
}
}