Sites Responsivos

[Pitag346 0]

Olá pessoal, tudo bem com vocês ???

Espero que sim...

Estou um problema com meu site, tentei montar ele com responsividade, mas não obtive sucesso.

Alguém que tenha bastante conhecimento nessa área teria um site de estudos/apostilas para indicar ?

 

Obrigado.

 

 

 

 

 

[dougtop 31]

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.

 

[Pitag346 0]

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

[Omar~ 87]

@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,390625.

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 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...