Boa noite, preciso criar um layout com duas colunas e inserir dados nas colunas utilizando HTML 5 e CSS3 de forma responsiva sem utilizar nenhum framework. Sou péssimo com layouts e um exemplo simples desse laytout ia ajudar bastante.
Queria fazer algo similar a imagem e que se ajustasse de acordo com o dispositivo.
-
Não precisa de frameworks, basta usar @media queries.– Meu ovo30/07/2018 às 2:09
2 Respostas
Um exemplo simples usando @media query. Para que as div
s sejam responsivas você pode usar como unidade de medida a porcentagem %
(ou vw
, de viewport width).
No seu caso, duas div
s como se fossem duas colunas, meio a meio, você poderia usar:
body{
margin: 0;
}
main{
display: flex;
}
.coluna{
width: 46%;
background: yellow;
padding: 2%;
}
@media screen and (max-width: 600px){
main{
display: block;
}
.coluna{
width: 100%;
}
}
<main>
<div class="coluna">
div 1
</div>
<div class="coluna">
div 2
</div>
</main>
Como a metade seria 50%
mas eu usei um espaçamento interno de 2%
, eu desconto a soma dos valores de cada lado (esquerda e direita, igual a 4%) e deduzo na largura da div
, ficando 46% (50% - 4% = 46%).
Onde possui (max-width: 600px)
significa que quando a largura da tela for de até 600 pixels, serão aplicados os estilos da @media rule, ou seja, até 600 pixels de largura da tela, as duas div
s irão ocupar a largura total da tela (100%
) ficando uma abaixo da outra. Acima de 600px
uma ficará ao lado da outra.
Esse valor de 600px
você deve definir de acordo com o conteúdo de cada div
, o que você achar que melhor se adapta visualmente. Pode ser um valor um pouco maior ou menor, vai depender do seu layout.
Vale lembrar que o conteúdo de cada div
também deverá ter estilos que se adaptem à largura das div
s-pais (imagens, divs internas, textos etc.). Tudo deve ter dimensões relativas.
Você pode criar também outras @media queries
para alterar as propriedades de elementos para cada dimensão de tela, também vai depender do seu layout e do que você deseja fazer.
Na responsividade tudo é relativo, vai depender do conteúdo que você irá usar, definir dimensões máximas (como max-width
), mínimas (como min-width
), e outra infinidade de critérios baseados no conteúdo que você deseja exibir.
Também é preciso incluir a tag abaixo no head
para que o navegador em dispositivos móveis reconheçam as dimensões e escala da tela (mais sobre isto neste link):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pode dar uma estudada neste tutorial sobre responsividade.
Ronaldo como vc colocou as tags HTML5
e CSS3
vou te dar duas formas diferentes de fazer isso, uma com display-gri
d e outra com display-flex
.
Primeiro vou deixar umas observações.
Evite usar float
para construir layout. Essa técnica de floats
foi usada em uma época onde os recursos do CSS eram muito limitados. Float na verdade serve para alinhar conteúdos a direita ou a esquerda uns dos outros, como textos e imagens, textos e tabelas, etc, não para construir um grid, como vc pode consultar na documentação da Mozilla o uso correto do float
: https://developer.mozilla.org/pt-BR/docs/Web/CSS/float Resumindo, float
atualmente não é uma boa prática na construção de grids
Sobre usar padding
em %, imagine que sua página será aberta em um monitor 4K na sala da diretoria, o que vai acontecer é que valores em % corresponde a uma proporção da tela (proporção horizontal), e quanto maior a tela maior será seu padding
,. Então se 2% em um monitor HD fica legal, imagina o que são 2% em um monitor 4K que é 2x mais "largo" seu pedding vai ficar 2x maior, por exemplo passando de 16px para 32px que pode ser algo indesejado.
Eu fiz o tratamento responsivo para que as colunas ocupem toda a linha em telas de até no máximo 768px, mas caso vc nao queira isso basta apagar o que está dentro do @media no css
Agora as opões com flex
e grid
.container-flex {
display: flex;
box-sizing: border-box;
border: 2px solid black;
padding: 1rem auto;
justify-content: space-around;
padding: 1rem 0.5rem;
}
.container-flex div {
box-sizing: border-box;
border: 2px solid black;
width: calc(50% - 1rem);
}
@media screen and (max-width: 768px) {
.container-flex {
flex-wrap: wrap;
}
.container-flex div {
width: calc(100% - 1rem);
margin-top: 1rem;
}
.container-flex div:first-child {
margin-top: 0;
}
}
<div class="container-flex">
<div>lado a</div>
<div>lado b</div>
</div>
Opção com grid
.container-grid {
box-sizing: border-box;
padding: 1rem;
border: 2px solid black;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
}
.container-grid div {
box-sizing: border-box;
border: 2px solid black;
}
@media screen and (max-width: 768px) {
.container-grid {
grid-template-columns: 1fr;
}
}
<div class="container-grid">
<div>lado a</div>
<div>lado b</div>
</div>
-
Hugão, o lance dos 2% foi apenas um exemplo. Aliás, todos os valores lá são exemplos, inclusive o float. Era apenas pro cara ter uma noção, não tive a intenção de fornecer um layout pronto. Eu até escrevi "..você poderia usar:"... ;)– Meu ovo30/07/2018 às 19:15
-
@sam de boa meu jovem, só aproveitei a oportunidade para dar umas dicas para ele já que ele falou que não tinha muita experiencia com layout etc. Ai deixei uns comentários que achei que ele deveria levar em consideração. Nem sempre nós damos respostas perfeitas, ao meu ver o autor da pergunta tem que fazer tb a parte dele, só deia a dica ;)– hugocsl30/07/2018 às 19:30