html - Tamanho dos elementos numa pagina responsiva - Stack Overflow em Português
Tamanho dos elementos numa pagina responsiva
Estou numa situação bastante complicada, já pesquisei em diversos lugares e não sei se estou pesquisando certo, entretanto, minha dúvida é a seguinte:
Em muitos sites temos a seguinte configuração de composição em uma página: um cabeçalho com a nome do site, uma barra de navegação abaixo do cabeçalho, um corpo com conteúdo abaixo da barra de navegação e por fim um rodapé abaixo do corpo.
Entretanto existem várias duvidas que me cercam com relação a isso.
Já que eu teria colunas uma abaixo da outra, o celular jogaria o tamanho da coluna na tela toda, mas no desktop se eu atribuir um tamanho em porcentagem para as colunas, então, isto também teria efeito no celular e ficaria horrível.
Por outro lado, se eu não definir tamanho algum para as <div> e deixá-las se comportarem de acordo com a quantidade de conteúdo, isso ficaria estranho, pois dependendo do texto do corpo a <div> de conteúdo iria variar de tamanho e meu <footer> ficaria pulando pra cima e pra baixo.
editada 14/04/17 às 20:47
perguntada 14/04/17 às 17:18
Nas tags você indica que sua dúvida tem relação ao Bootstrap 3. Então, você precisa entender o conceito de grid Exemplos pra resolver sua questão. Outros conceitos são margin e padding, mas o grid é o mais importante aqui.
Também presumi, que você tenha algum conhecimento de criação de sites não responsivos.
Depois de 15 anos fazendo sites com <table> e depois com o CSS anterior ao CSS3, também tive dificuldades pra entender coisas como esta.
Notei que você fala em colunas uma abaixo da outra... Colunas ficam uma ao lado da outra. Linhas ficam uma abaixo da outra.
No bootstrap você aninha colunas dentro de linhas.
<div class="col-md-4">coluna 4/12 = 1/3</div>
<div class="col-md-3">.coluna 3/12 = 1/4</div>
<div class="col-md-5">coluna 5/12</div>
Este código cria duas linhas, cada uma com três colunas.
A primeira linha tem 3 colunas da mesma largura, cada uma com um terço do tamanho.
A segunda linha também com 3 colunas. cada uma com um tamanho diferente.
Você notou que dividi por 12? É porque o grid do bootstrap faz isso. Ele divide a largura da tela em 12 partes.
Tambem deve ter notado o md. Este é um modificador de classe que indica que esta regra se aplica a monitores médios (pense tablet) para cima.
Ou seja col-md-3, pode ser lido como ocupe um quarto (3/12=1/4) se a tela do dispositivo for média.
Agora, pense mobile first, porque as regras do bootstrap são aplicadas de baixo para cima (em termos de tamanho).
Se você usar col-sm-7 estará dizendo ocupe 7 espaços de 12, quando a tela for pequena.
Então, não defina tamanhos absolutos ou percentuais para as div. Entenda o grid e adapte o layout do site para usa-lo.
No design responsivo, você pode criar uma versão de layout para cada tamanho de tela (jeito antigo, sem frameworks como boostrap) e ter a maior dor de cabeça pra manter as coisas funcionando. Ou pode entender melhor o conceito e fazer um único código para qualquer dispositivo.