3

Sou um iniciante com Bootstrap e layouts responsivos e encontrei um pequeno obstáculo no desenvolvimento de um layout responsivo utilizando o Bootstrap. No layout do site, o conteúdo foi criado para ser exibido com no máximo 1170px e no mínimo 940px de largura, devendo ser nesse intervalo, fluído. No Bootstrap o grid se adapta de 724px e 1170px dependendo do viewport, e é nesse ponto que não entendo. É possível determinar com o viewport que o layout será responsivo somente entre 940 e 1170 pixels, sendo que em menores que 940px ele se comporte como não responsivo e em maiores que 1170 ele centralize o conteúdo?

Minha estrutura está assim:

...
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="screen">
<link type="text/css" href="css/bootstrap-responsive.min.css" rel="stylesheet">
...

No estilos.css:

/* Desktop maiores */
@media (min-width: 1171px) {
    .container-fluid {
        max-width: 1170px;
        margin: 0 auto;
    }
}

O problema é no viewport? E como seria o correto?

1 Resposta 1

1

Voce pode determinar, como em if, else if o comportamento para cada tamanho de tela, como até x pixel, entre x e y e maior que y, desta forma:

@media screen and (min-width: 1171px) {
      //vai o código
}

@media screen and (min-device-width: 940px) and (max-device-width: 1170px) { 
    //vai o codigo
}

@media only screen and (max-device-width: 939px) {
    //vai o codigo
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .