Как лучше сделать резиновую верстку 960-1200px?

Question

[Bogopodoben]

Добрый день. Суть вопроса такова.
Есть макет, пожелание сделать макет слегка резиновым min-width: 960px and max-width: 1200px.
Желательно, чтобы весь внутренний контент лепить по bootstrap'у ( на сколько я знаю, это лишняя тема).

Знаю, что можно все дело обернуть в класс и указать выше перечисленный параметры, но так как не занимался такими решениями раньше, не совсем уверен как должно все выглядеть. Был бы рад увидеть советы, примеры, решения. Буду благодарен.

Answer 1

[WhiteSama]

пишишь

body {
  min-width: 960px;
  max-width: 1200px;
   margin: 0 auto;
}
header {
  width: 100%;
}
.logo {
 margin: 0 auto;
 width: 80%;
}
.mainMenu {
 width: 60%; 
}

То бишь, указываешь ширину блоков и элементов в %, и при необходимости, ограничиваешь максимальную, и минимальную ширину. Если использовать бутстрап, то в настраеваешь его под данные размеры. Но я бы не стал использовать сетку бутсраповскую, если адаптивность не так важна.

Answer 2

[Alexander Tartmin]

По большому счёту адаптивная вёрстка это несколько версий 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%; /* Обратите внимание что я не переписываю для другого разрешения все стили, а только меняю или добавляю то, что мне нужно что бы изменялось.  */
    }
}