Ir para conteúdo
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.

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por MateusOFCZ
      Olá, estou desenvolvendo um BOT utilizando java, javascript e node.js, gostaria de saber se tem como eu fazer um painel em java (arquivo executável) onde tem um campo de texto (Que é digitado um tema, exemplo "Brasil"), uma lista com 3 itens (Quem é, O que é e A história do(a), você iria selecionar, por exemplo no campo de texto você digitou "Brasil" e na lista você selecionaria "A história do(a)"...) como faço pra quando clicar no botão "Enviar" ele iria executar um comando em node.js adicionando as informações (Tema e Opção).

       


      Caso não tenha entendido posso tentar explicar de uma forma mais clara!
    • Por gustavopc123
      Meu site diyjogos fiz com html e css, e acho parece que está faltando alguma coisa, alguém poderia me auxiliar, minha dúvida é se da pra fazer um formulário de contato com html e css e que realmente funcione (Obs: Não tenho hospedagem é tudo com codigos, sem php)
       
      Alguem poderia me ajudar ?
       
      Da uma olhada no site por favor.
    • Por wlweslley
      Bom dia/Tarde/Noite
       
      não utilizar sistema de login
       
      Espero que possam Ajudar
       
      bom vi vários post mais todos era a relação a Login e pagina de Login que nao é o meu caso .
       
      estou precisando fazer o seguinte.
       
      Bloquear o acesso o site digitando : www.site.com/site/acesso/index.php caso entre assim direcionar para o URL > www.encurtado.com/sdfsdffsd
       
      Permitir o acesso desse Jeito
      acessar : www.encurtado.com/sdfsdffsd   ---Direcionar para--->  www.site.com/site/acesso/index.php
       
      *Caso não possa ser como acima e precise passar por alguma pagina do site antes de ir para o acesso pode ser assim
       
      acessar : www.encurtado.com/sdfsdffsd   ---Direcionar para--->  www.site.com/site/liberar.php ----> www.site.com/site/acesso/index.php
       
       
      Preciso com urgência essa ajuda Agradeço a todos que poder ajudar. 
       
       
    • Por mrpicolo22
      Boa tarde, estou fazendo um site para um cliente que tem duas versões, português e inglês. o cliente quer que quando alguem de fora do brasil acesse o site, automaticamente carregue o site na versão em inglês (www.site.com.br/eng). Como fazer isso? teria que pegar o ip da pessoa e redirecionar?
    • Por CelsoHyperion
      Pessoal boa tarde preciso de ajuda! Tenho dois arquivos 1 formulario e outro para envio para o email. já estou com site hospedado!
      Só que não envia o formulario pro email me ajudem pf
       
      1 - Arquivo (formulario)
       
       
      <?php if (!defined('FLUX_ROOT')) exit; ?>
      <div>
              <p style="color: black" font-weight: bold>
              <h3>DOAÇÕES:</h3>
                  <p>
      Doando você poderá adquirir o "VIP" e Cash para comprar visuais e itens para lher ajudar no Servidor e para isso, basta efetuar a doação com o metodo de <br>pagamento escolhido e depois
      confirmar os dados do pagamento no formulário de confirmação abaixo.<br />
          </p>
          <p>
          <b>Como funciona?</b>
          </p>
          <p>
      A cada R$ 1,00 você recebe o 1.000 ROP's (1k) para ser utilizado dentro da Loja de ROP's do jogo. 
      Exemplo: Se doar R$ 30,00 você receberá 30.000 ROP's (30k)
          </p>
          <p>
              <b>Como acessar a Loja de ROP's?</b>
          </p>
          <p>
      Para acessar a loja basta clicar no botão Loja ROP's que fica ao lado do Mini-Mapa. Lá você terá acesso a todos os itens que poderá adquirir, dentro da loja você<br> pode consultar seu saldo de ROP's no canto inferior esquerdo da tela. Boas compras!
          </p>
      <p>
          <center><h2>Confirmação de Doação</h2></center>
      <form action="?module=main&action=envio_form" method="post" name="form">
      <table width="500" heigth="500" border="1">
          <div>
              <label for="nick">Conta do Jogo(Login):</label>
              <input type="text" id="nick" name="usuario_nick" />
          </div>
          <p></p>
          <div>
              <label for="date">Data da Doação:</label>
              <input type="date" id="usuario_date" name="usuario_date" />
          </div>
          <p></p>
          <div>
              <label for="celular">Celular:</label>
              <input type="tel" id="usuario_celular" name="usuario_celular">
          </div>
          <p></p>
          <div>
              <label for="valor">Valor Doado:</label>
                 <input type="text" id="usuario_valor" name="usuario_valor"/>
          </div>
          <p></p>
          <div>
              <label for="metodo">Método de Pagamento:</label>
              <select id="usuario_metodo" name="usuario_metodo"> 
                  <option value="PayPal">PayPal</option>
                  <option value="Deposito">Depósito Bancário</option>
                  <option value="Transferencia">Transferencia Bancária</option>
              </select>
          </div>
          <p></p>
          <div>
              <label for="dadospag">Dados do Pagamento:<br></label>
              <textarea id="usuario_dadospag" rows="15" cols="70" name="usuario_dadospag"></textarea>
          </div>
          <p></p>
          <div><p>
          <b>PayPal:</b> Informar o nome da conta do Paypal e o e-mail que foi utilizado no pagamento.<br>
          <b>Depósito em Caixa Eletrônico/Atendente:</b> Informar o número do envelope/documento.<br>
          <b>Transferência:</b>Informar agência, número da conta e nome do titular.
          </div>
          <div class="button">
              <a href="/?module=main&amp;action=envio_form"></a>
              <button type="submit">Confirmar Doação</button>
          </div>
      </table>
      </form>
       
      </p>
        </p>
      </div>
       
      2 Envio para email:
       
      <?
       
      $destinatario = "eprorag@gmail.com";
      $usuario_nick = $_REQUEST['usuario_nick'];
      $usuario_date = $_REQUEST['usuario_date'];
      $usuario_celular = $_REQUEST['usuario_celular'];
      $usuario_valor = $_REQUEST['usuario_valor'];
      $usuario_metodo = $_REQUEST['usuario_metodo'];
      $usuario_dadospag = $_REQUEST['usuario_dadospag'];
       
      $body = "===================================" . "\n";
      $body = $body . "===================================" . "\n\n";
      $body = $body . "Nick: " . $usuario_nick . "\n";
      $body = $body . "Data Pagamento: " . $usuario_date . "\n";
      $body = $body . "Celular: " . $usuario_celular . "\n\n";
      $body = $body . "Valor Pago: " . $usuario_valor . "\n\n";
      $body = $body . "Metodo de Pagamento: " . $usuario_metodo . "\n\n";
      $body = $body . "Dados do Pagamento: " . $usuario_dadospag . "\n\n";
      $body = $body . "===================================" . "\n";

      mail($destinatario, $usuario_nick , $body, "From: $destinario\r\n");

      header("location:/?module=main&action=doa");
      ?>
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.