Jump to content
Pitag346

Sites Responsivos

Recommended Posts

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.

 

 

 

 

 

Share this post


Link to post
Share on other sites

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.

 

  • +1 1

Share this post


Link to post
Share on other sites

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

 

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By jadson16
      Estou com um erro no site , esse site era de um jogo antigo que estava gravado no dvd ai tentei abrir ele só pra olhar mesmo e relembrar os velhos tempos mais não consigo arrumar, estou muito precisando de ajuda quem poder me ajudar por favor ficarei grato, vou postar a imagens dos seguinte erros:
       

      Esse é o primeiro erro que mostra e quando vou olhar na linha 460 está assim


       
    • By Guss
      var carro = {
      cor = "azul",
      modelo = "fusca",
      marca = "Volwagen,
      kms = 10000,
      combustivel = "gasolina"
      }
       
    • By MateusOFCZ
      Olá, estou desenvolvendo um projeto de registro de clientes em java no netbeans e usando o MySQL Workbench e Xampp, gostaria de saber se é possível fazer com que o programa fique verificando se está conectado com o banco de dados, e caso não esteja ele mostra uma mensagem pedindo para o usuário se conectar em uma rede, caso ele se conecte o programa irá esconder essa mensagem e funcionará normalmente.

      Eu consegui fazer com que ele mostre se está conectado ou não, porém se eu desligar o servidor ele não atualiza mostrando que está offline, ele continua como online...
    • By ShibuiFansub
      Boa tarde, tenho 18 anos e decidi criar meu primeiro blog, só por teste mesmo, acabei baixando dois template e acabei gostandos de ambos, tentei fazer uma "fusão" deles, mas meio que não consegui.
      Eu queria colocar o 'estilo de postagem' desse template: http://prntscr.com/o105rw
      Nesse daqui: http://prntscr.com/o108ad
      Download Template 1:  https://drive.google.com/file/d/1mhOCYgbwPIcO14wPwOumemBrCZR5l3fT/view
      Download Template 2:  https://drive.google.com/file/d/1QmohfY7MUZI4PTIQYkjbNRwxxWkfIflD/view
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.