Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gilbertjuniors

Design responsivo - Identificando Devices

Recommended Posts

Pessoal, boa noite.

Estou estudando sobre design responsivo e veio uma grande duvida:

Temos TVs, (24 polegadas ou mais), notebooks (mais comumente 14 ou 15 polegadas), tablets (dentre varias telas temos 8 ej 10 polegadas) e celulares (geralmente 4,alguma coisa ou 5,alguma coisa em polegadas)

Todos podem ter resoluções Full HD por exemplo mas com tamanho de telas muito diferentes (densidade de pixels por polegada diferetes)

 

Então como um site que eu crio identifica o tamanho de tela e garante  que fontes, imagens e botões fiquem acessíveis em todos os devices?

Creio que identificar a resolução de tela não seja o suficiente, como fazer então?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá!

 

Veja bem... 1000 pixels são 1000 pixels, seja em 72 ou 300 DPI, por ex.

A única diferença é que em 72 DPI (geralmente utilizados para conteúdos digitais, como um site) você vai visualizar o site em uma proporção maior (tudo fica maior, junto).

 

O que você precisa se preocupar é especificamente com o tamanho da "tela útil" do navegador (ou viewport) do usuário, em pixels.

Por exemplo: eu posso ter uma tela gigante, mas se eu redimensionar meu navegador de forma que ele tenha 500px de largura, ele deverá se comportar como se estivesse exibindo o conteúdo para um smartphone.

 

E como isso é feito? Geralmente com media queries. Veja:

 

https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries

https://tableless.com.br/introducao-sobre-media-queries/

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Kisha
      Estou procurando um programador web para desenvolver um site front responsivo, de preferência pessoas com referências e trabalhos já feitos.
       
      Contato via discord: quando eu tinha uma glock#5547
    • Por 4Unknow
      Boa noite comunidade da Imasters, como vocês estão?

      Pessoal peguei um botão responsivo com popup, mas não consigo adicionar mais dele um do lado do outro.
      Vou deixar o conteúdo dele aqui se alguém puder me dar uma luz. Só queria copiar ele para adicionar mais dois botões um ao lado do outro.

      Quem puder me ajudar, ficaria agradecido.

      segue código:

      index.html:
       
      <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Alterações Robô Everest</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <h1> Configurações Robô Everest </h1> <h2> Data: 14/04/2021</h2> <button type="button" class="main-btn-rect popup-btn" data-popup="popup-reg">Modo Agressivo</button> <div id="popup-reg" class="popup"> <div class="popup-content"> <div class="event-header"> <h6>Don't be shy, say hi!</h6> </div> Stop Loss: 255<br> Stop Gain: 30<br><br> Ou a seu gosto!<br><br> Desvio Envelope: 0.12<br><br> Pausas nas operações: 10:00,11:00,10:30,12:30<br> <span class="fade-out main-btn-circle">╳</span> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
      script.js:
       
      $(document).ready(function(){ $('.popup-btn').click(function(){ var popupBlock = $('#'+$(this).data('popup')); popupBlock.addClass('active') .find('.fade-out').click(function(){ popupBlock.css('opacity','0').find('.popup-content').css('margin-top','350px'); setTimeout(function(){ $('.popup').removeClass('active'); popupBlock.css('opacity','').find('.popup-content').css('margin-top',''); }, 600); }); }); });
      style.css:
       
      @import url('https://fonts.googleapis.com/css?family=Lobster'); @import url('https://fonts.googleapis.com/css?family=Roboto'); body{ margin: 0; padding: 0; height: 100vh; font-family: 'RobotoLight', sans-serif; border-bottom: 1px solid #FFFFF0; background: #00c6ff; background: -webkit-linear-gradient(to right, #0072ff, #00c6ff); background: linear-gradient(to right, #0072ff, #00c6ff); overflow: hidden; } button { text-decoration: none; border: none; } h1 { position: absolute; display: inline-table; top: 20%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; text-transform: uppercase; letter-spacing: 2px; color: #FFFFF0; } h2 { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); font-size: 25px; text-align: center; color: #FFFFF0; } .popup-btn{ position: absolute!important; top: 55%; left: 50%; transform: translate(-50%,-50%); } .main-btn-rect, .main-btn-circle{ position: relative; margin: 0; font-family: 'Roboto', sans-serif; color: #FFFFF0; background-color: rgb(252, 79, 79); text-transform: uppercase; font-size: 25px; letter-spacing: 1px; outline: none; cursor: pointer; z-index: 100; } .main-btn-rect { padding: 10px 80px; line-height: 30px; } .main-btn-rect:before, .main-btn-rect:after{ position: absolute; content: ''; top:0; width: 0%; height: 100%; background-color: rgba(255, 255, 240, 0.2); -webkit-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } .main-btn-rect:before { left: 0; } .main-btn-rect:after { right: 0; } .main-btn-rect:hover:before, .main-btn-rect:hover:after{ width: 50%; } .main-btn-circle{ height: 40px; width: 40px; -webkit-border-radius: 50%; border-radius: 100%; line-height: 40px; -webkit-transition: box-shadow 0.3s; -o-transition: box-shadow 0.3s; transition: box-shadow 0.3s; } .main-btn-circle:hover{ -webkit-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); -moz-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); } .popup{ position: fixed; top: 100%; width: 100%; height: 100%; z-index: 10001; } .popup.active{ top:0; background-color: rgba(3, 3, 3, 0.98); transition: background-color .6s ,opacity .6s; } .popup .main-btn-rect{ padding: 10px 100px; } .popup .popup-content{ position: absolute; top: 50%; left: 50%; max-height: 568px; min-width: 320px; margin-top: 150px; padding: 25px; background-color: #FFFFF0; color: #070000; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transition: margin .6s; -webkit-transition: margin .6s; -moz-transition: margin .6s; -o-transition: margin .6s; } .popup.active .popup-content{ margin-top: 0px; } .popup-content h6{ display: table; font-size: 16px; text-align: center; margin: 10px auto; font-family: 'Roboto',sans-serif; text-transform: uppercase; font-weight: 100; } .form-group{ position: relative; width: 90%; margin: 0px auto; } form#send input, form#send textarea{ position: relative; margin-bottom: 32px; width: 100%; height: 29px; font-family: 'RobotoLight', sans-serif; text-indent: 20px; background-color: transparent; outline: 0; border: none; border-bottom: 1px solid #070000; -webkit-transition: border 0.6s; -o-transition: border 0.6s; transition: border 0.6s; } form#send input:focus, form#send textarea:focus{ border-bottom: 1px solid rgb(63, 173, 168); } form#send label{ position: absolute; top: 0; line-height: 28px; -webkit-transition: color .5s; -o-transition: color .5s; transition: color .5s; } form#send input:focus + label, form#send textarea:focus + label{ color: rgb(63, 173, 168); } form#send .txt{ line-height: 22px; left: 2px; } form#send .main-btn-rect { position: relative; display: block; padding: 12px 80px; margin: 0px auto; font-size: 14px; } form#send .main-btn-rect i { margin-right: 5px; } .popup .fade-out{ position: absolute; top: -20px; right: -20px; text-align: center; font-size: 15px; } .share-wrap{ position: absolute; display: inline-table; top: 67%; left: 50%; transform: translate(-50%, -50%); padding: 15px; text-align: center; } .share-btn{ color: #FFFFF0; padding: 7px 25px; text-decoration: none; cursor: pointer; font-weight: 100; font-size: 14px; font-family:'Lobster', sans-serif; background-color: rgba(63, 173, 168, .8); text-transform: uppercase; border-radius: 5px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .share-btn:hover{ color: #FFFFF0; text-decoration: none; background-color: rgba(63, 173, 168, 1.0); } .resp-sharing-button__link, .resp-sharing-button__icon { display: inline-block } .resp-sharing-button__link { text-decoration: none; color: #fff; margin: 2px; } .resp-sharing-button { border-radius: 5px; transition: 25ms ease-out; padding: 6px 9px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .resp-sharing-button__icon svg { width: 1em; height: 1em; margin-right: 0.4em; vertical-align: top } .resp-sharing-button--small svg { margin: 0; vertical-align: middle } .resp-sharing-button__icon, .resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle { fill: #fff; stroke: none } .resp-sharing-button--facebook { background-color: #3b5998; border-color: #3b5998; } .resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active { background-color: #2d4373; border-color: #2d4373; } .resp-sharing-button--twitter { background-color: #55acee; border-color: #55acee; } .resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active { background-color: #2795e9; border-color: #2795e9; } .resp-sharing-button--linkedin { background-color: #0077b5; border-color: #0077b5; } .resp-sharing-button--linkedin:hover, .resp-sharing-button--linkedin:active { background-color: #046293; border-color: #046293; } @media only screen and (max-width: 768px){ h1 {font-size: 25px;} h2 {font-size: 14px;} form#send .main-btn-rect {padding: 7px 60px; font-size: 14px;} .popup-btn{padding: 7px 60px; font-size: 14px;} } Tentei copiar o código do index.html mas não aparece os outros botões.
      Puderem me ajudar agradeço.

      Um abraço.
    • Por kaionr
      Olá, estou com uma dificuldade para posicionar um elemento. 
      Se trata de um pop-up que aparece na tela ao clicar. Acontece que esse pop-up não fica centralizado em todas as telas dependendo da resolução.
      No momento estou usando o position absolute, a div é essa abaixo: 
      .form-structor { background-color: #222; border-radius: 15px; height: 550px; width: 450px; position: absolute; top: -100px; left: 170px; overflow: hidden; } Também já tentei:
      {position: relative; top: 50%; left: 50%;}
       
       
      Alguém pode me ajudar? 
      Qual propriedade eu utilizo para ficar centralizado tanto horizontal e quanto vertical em qualquer resolução?
    • Por Sherlock02
      Olá!
       
      Eu estou tentando fazer um layout de postagem em que o primeiro ocupa a largura de 100%. Os demais são dispostos em grid, dois posts.
      (Vou anexar uma imagem para exemplificar o que desejo).
       
      Segue o código:
      .post:first-child{width:100%;position:relative;} .post{margin-bottom:60px;width:48.8%;float:left;background:#eee} .post:nth-child(2n+2){margin-right:30px;}  
      <div  id='mainwrapper'> <div class="post">   <div class="post-entry">        1 Post com width 100%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        2. Post com width 48%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        3. Post com width 48%. Here goes my post.   </div> </div>   </div><!-- mainwrapper--> Esse código que fiz não me satisfez por completo porque o post da direita não "gruda" no canto, então está ficando desigual o primeiro e os demais.
       
      Eu gostaria de saber se não existe uma forma mais prática de fazer esse código.
      Obrigada!

    • Por BelleFisio
      Olá! Bom dia!
       
      Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva)
       
      Teria alguma forma de corrigir isso?
       
      O codigo esta assim:
      <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div>  O CSS:
      .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;}  
      Obrigada
       
       
×

Informação importante

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