1/ Правильная последовательность медиазапросов.
От меньшего к большему (min-width: 768px --> 1200px --> 1366pxpx):
@media (min-width: 768px) {
...
}
@media (min-width: 1200px) {
...
}
@media (min-width: 1366pxpx) {
...
}
От большего к меньшему (max-width: 1366pxpx --> 1200px --> 768px):
@media (max-width: 1366px) {
...
}
@media (max-width: 1200px) {
...
}
@media (max-width: 768px) {
...
}
Мне такая схема помогает запомнить.
2/ Адаптация оберток (.wrap, .container) и других блоков.
.wrap {
max-width: 1200px;
width: 100%;
}
или
.container {
width: 90%;
}
3/ Адаптация изображений и других медиаобъектов
img {
max-width: 100%;
width: 100%;
height: auto;
}
4/ Расположение блоков
Отмена float
если нужно, применение flex
или другой разметки.
5/ Различные другие факторы (лишние отступы, фиксированная ширина блоков, шрифт, ...)
Еще рекомендуется использовать box-sizing
(не совсем с адаптацией связано, просто совет)
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Простыми словами, смысл в том, что адаптивная верстка предусматривает нормальное отображение сайта на различных устройства (планшеты, телефоны). Т.е. возможно изменение размеров блоков, шрифтов. Изменение расположения блоков.
P.S: Все относительно и обобщенно. Для каждого случая нужно смотреть в чем проблема.
СОВЕТ: На просторах интернета уже уйма уроков и примеров адаптивной верстки, посмотрите!