Sites Responsivos

Olá amigo,

Porque você não tenta identificar o que deu errado para que possamos ajuda-lo? Poste um print da página e o código...as vezes por um ou outro detalhe sua responsividade não está funcionando.

De qualquer forma, o segredo está em entender e usar as medias queries para trabalhar com responsividade.

Media Queries é uma técnica usada para criar um ponto de mudança visual (breakpoint). Com os comandos das medias queries, é possível fazer que um site mude o seu visual, se tornando adaptado para diferentes resoluções.

Leia sobre elas aqui https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries

Eu costumo trabalhar com 2 breakpoints (que geram 3 visualizações diferentes):

"celular" - 320px à 479px

"tablet" - 480px à 959px

"desktop" - 960px ao infinito

Mas não existe uma regra na criação dos breakpoints, você precisa entender o que satisfaz o seu site!

Aqui tem um exemplo prático da responsividade aplicada: https://jsfiddle.net/dougtop/ofwwfbbx/15/

Quando acessar o link acima, não esqueça de redimensionar seu navegador para testar!

Dentro de cada seletor de @media, você colocará seletores de estilo css para que funcionem apenas dentro de um determinado intervalo de resolução. ;)

O assunto é bem amplo e aqui vão mais alguns links:

https://www.w3schools.com/css/css_rwd_intro.asp (referencia w3c sobre responsividade)

https://marketingdeconteudo.com/web-design-responsivo/ (dá um entendimento geral sobre o assunto)

https://www.alura.com.br/curso-online-web-design-responsivo (cursinho muito bom, mas é pago :/)

Espero ter ajudado!

Abraços, Douglas.

@dougtop Obrigado amigo, estudei os links e consegui sucesso com o meu responsivo. agradeço tbm ao amigo @Omar~

@Pitag346 Quando for postar códigos que abrangem muitas linhas use o botão (SPOILER) aqui do editor no fórum. Porque em 99% dos casos como é o seu caso não nos interessa saber o seu código como o seu não nos interessa; e sim orientar como desenvolver responsivos.

O principal e indispensável foco ao desenvolver responsivos, é determinar quando media deve ser usado. Para isso determinados que a contagem da resolução deve começar a partir do 1. Assim sendo seja qual for o navegador irá nasalizar a resolução e aplicar as propriedades CSS de acordo com o que nós fazermos.

Em resumo para que essa analise exista temos que indicar isso no cabeçalho da página.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

	 

	Pós isso é que definimos o média em nosso CSS

	min-width -> Quer dizer que enquanto a resolução não for a determinada, as propriedades dos elementos aqui definidas serão válidas.

	Exemplo:

.exemplo {
 width: 100%
}

@media (min-width: 600px) {

 .exemplo {
 width: 250px
 }
}

	Então, enquanto a resolução não for menor a 600px o div class exemplo vai possuir 600px de largura. Caso não ela irá possuir 100% de largura.

	 

	max-width -> Quer dizer que enquanto a resolução for maior que o determinado, as 

	propriedades dos elementos aqui definidas serão válidas.

	Exemplo:

.exemplo {
 width: 600px
}

@media (max-width: 600px) {

 .exemplo {
 width: 100%
 }
}

	Então, enquanto a resolução for maior a 600px o div class exemplo vai possuir 100% de largura. Caso não ela irá possuir 600px de largura.

	 

	Outro ponto que levo em consideração é recalibragem dos elementos. (Não sei se todos adotam essa técnica, mas essa é um técnica muito útil usada por mim, porém nem sempre é necessária)

	Se eu tiver um div que tenha 500px de largura, mas eu quero que essa div tenha a mesma proporção de tamanho em relação a tela uso da seguinte forma.

	Crio um div principal digamos 1280px, então para manter a proporção faço o calculo:

	500 dividido por 1280 que dar em  0,**39**0625.

	Então ao invés de dizer que essa div tem 500px digo que ela tem 39% assim sendo ela se mantém em proporção igual ao elemento pai.

	 

	Outra propriedade CSS muito útil seria a **calc**. Porém só deve ser usada em último caso e se se souber realmente o que está fazendo, pois o consumo de memória é altíssimo se comparado em relação ao benefício.

	Exemplo

.exemplo {
 width: calc(100% - 40px)
}

	Quer dizer que a div class exemplo tem 100% de largura com a disponibilidade menos 40px dos 100%.

	 

	Em resumo desenvolver  responsivo nada mais é que conhecer e saber usar as propriedades do CSS para posicionar elementos coma a disponibilidade de tela.

	 

	Por fim responsivos abrangem muitas técnicas 90% delas é você quem adquire com experiência. Na falta de experiência/capacidade muitos adotam frameworks o [Bootstrap](https://getbootstrap.com/) está entre os mais cogitados para tal fim.

	Não existe fórmula mágica, nem nada simples. É estudar e se experimentar, no fim o resultado obtido é satisfatório, ou pode se render e ficar dependente de frameworks o que não é má ideia se tiver que fazer tudo na mão bem depressa.

	Porém quando se tem experiência/capacidade tudo é resolvido de forma rápida e prática.

	Depende somente de ter experiência e não se pode consegui-la sem se experimentar, e tentar evoluir...