Как сделать адаптивность?

Question

[Qairat]

Всем привет
Сверстал лендинг пейдж на бутстрапе!
Теперь надо сделать адаптивность на различные устройство.
Киньте пожалуйста ссылку проверенные или же как-то помогите плиз)
Вот мой сайт

Answer 1

[Алексей Скляров]

Создаем файл mobile.css , пишем в него код:

@media only screen and (min-width: 600px) and (max-width: 1023px) {
 body {color:#fff}
 header {background-color:red;}
}

То есть для ширины от 600 пкс до 1023 пкс будет выполняться body {color:#fff} и header {background-color:red;}

Comments

[Qairat]

и так же для каждой детали да? и еще что можно сделать с шапкой моего сайта? как думаете?

[Алексей Скляров]

Qairat Batyrbayev: не обязательно переопределять все классы, можно доопределить. Например у вас в основном файле:

.top_line .logo {position:absolute;margin-top:-170px;}

Вы можете дописать для ширины от 600 до 1023 пкс следующее:

@media only screen and (min-width: 600px) and (max-width: 1023px) {
.top_line .logo {display:block;width:200px;margin-left:auto;margin-right:auto;}
}

В конечном итоге для телефона будет

.top_line .logo {display:block;width:200px;margin-left:auto;margin-right:auto;position:absolute;margin-top:-170px;}

Answer 2

[Mr. Pavlyukov]

Вот на оф.сайте информация - клик

А вообще бы Вы сначала до ума довели desktop версию. Горизонтальный скрол, поехавшие блоки. Фиксите.

Answer 3

[Максим Тимофеев]

У бутстрапа адаптивность есть из коробки и реализована через grid:
getbootstrap.com/css/#grid-media-queries
В чем проблема?
Вот у Вас в коде есть виды тортов, у них class="col-md-3" а почему бы не сделать class="col-xs-12 col-sm-6 col-md-3" - будет адаптивно, в том же духе с остальным.
Ну и шапку так же или без бутстрап с помощью медиазапросов.
Если хотите резину - старайтесь минимизировать фиксированные величины типа px, и используйте % или vh,vw,rem и другие относительные единицы. Показательный пример - Ваше лого. Оно ужасно смотрится на маленьких дисплеях.