Jump to content

Recommended Posts

Pessoal, estou estudando sobre unidades de medidas do CSS. Estou com a seguinte duvida: Para sites responsivos, a medida EM só serve para dizer o tamanho da fonte? Posso formatar uma div em forma de caixa toda com a medida EM? No caso, essa medida fica fixa? Ou responsiva? Fiz um teste e deu que ficou fixa. Mas a EM é uma medida pra sites responsivos, então o certo não era o caixa ficar de acordo com a tela do dispositivo? ou isso fica com a porcentagem (%)? Exemplo: 

<!DOCTYPE html>
<html>
    <head>
        <title>teste</title>
        <style>
            div {
            
                background-color: aqua;
                width: 30.8em;
                height: 30.8em;
            }
        </style>
    </head>
    <body>
        <div>  </div>
    </body>
</html>

Aqui tenho um exemplo em que a div "pai" é em % e a div filho é com a unidade EM. Nesse caso, ele não deveria pegar o valor da porcentagem do pai, e automaticamente reduzir o tamanho da div filho? Isso parece bastante com a unidade de medida PX.

<!DOCTYPE html>
<html>
    <head>
        <title>teste</title>
        <style>
            #pai {
                background-color: aqua;
                width: 100%;
                height: 100%;
            }
            #filho {
                background-color: indianred;
                width: 30.0em;
                height: 30.0em;
            }
        </style>
    </head>
    <body>
        <div id = "pai">
            <div id = "filho">
            </div>
        </div>
    </body>
</html>

No caso, pra formatação de div's com width e height, tenho que utilizar % sempre que quiser deixar responsivo ? Se sim, isso significa que em questão de formatação de imagem o EM e REM seria praticamente a mesma coisa que o pixel? sempre ficando no mesmo tamanho independente do dispositivo como no exemplo a cima?

Outra pergunta: O EM e REM é só pra tamanho de fontes ou da pra fazer a coisa a cima?

Outra pergunta: Qual a unidade de medida mais utilizada hoje em dia pra sites responsivos? EM, REM ou outra melhor?

 

Desde já obrigado!

Share this post


Link to post
Share on other sites

Olá Keven.

Sim dar para se formatar blocos pelo uso do EM, mas sugiro a você que use somente para textos. Porém no uso de margins e paddings em muitos casos é a melhor escolha. Prefira formatar tamanho de blocos em design responsivo com o uso do %. Sempre o pulo do gato em design responsivo será o media-query.

Pelo menos é essa a minha experiência com em uso em EM

Share this post


Link to post
Share on other sites
5 horas atrás, OmarF disse:

Olá Keven.

Sim dar para se formatar blocos pelo uso do EM, mas sugiro a você que use somente para textos. Porém no uso de margins e paddings em muitos casos é a melhor escolha. Prefira formatar tamanho de blocos em design responsivo com o uso do %. Sempre o pulo do gato em design responsivo será o media-query.

Pelo menos é essa a minha experiência com em uso em EM

Obrigado por responder. Então deixo os textos com o EM e os blocos com o % + media-query. Vejo muita gente falando em usar o Bootstrap e outros frameworks por ae. No entanto estou começando a estudar o media-query agora. No caso, é melhor eu ir estudando responsividade como estou fazendo agora, sem o uso do bootstrap? Vejo que tem gente que utiliza o bootstrap só pra pegar os grids e abandonam todo o resto dele. Se eu aprender a usar o media-query e aprender a fazer meus próprios grids, o bootstrap fica dispensável? Em questão de entrar no mercado (Estou louco pra ganhar dinheiro com isso. Faz 7 meses que estudo já o.o) sou obrigado a aprender o Bootstrap?

Share this post


Link to post
Share on other sites
3 minutos atrás, keven1406 disse:

Obrigado por responder. Então deixo os textos com o EM e os blocos com o % + media-query. Vejo muita gente falando em usar o Bootstrap e outros frameworks por ae. No entanto estou começando a estudar o media-query agora. No caso, é melhor eu ir estudando responsividade como estou fazendo agora, sem o uso do bootstrap? Vejo que tem gente que utiliza o bootstrap só pra pegar os grids e abandonam todo o resto dele. Se eu aprender a usar o media-query e aprender a fazer meus próprios grids, o bootstrap fica dispensável? Em questão de entrar no mercado (Estou louco pra ganhar dinheiro com isso. Faz 7 meses que estudo já o.o) sou obrigado a aprender o Bootstrap?

 

Estava a responder um tópico meu quando vi a notificação.

Então... Não, você não é obrigado a aprender a usar o bootstrap, mas não deixe de aprender a usar-lo que, pode ser útil dependendo do trabalho que vá fazer.

Meu conselho é que esqueça de qualquer framework pelo por enquanto e só venha a usar quando souber caminhar com as próprias pernas, ou seja fazer tudo na mão por conta própria e não pegar algo mastigado e engolir se que me entende.

Já vi isso várias vezes acontecer de uma pessoa só aprender a suar tal coisa e quando o "bixo" pega pro lado dele ele não sabe o que fazer.

Mas enfim, como disse e acho que todo dev concordaria comigo.

- E porque então eu deveria aprender a usar o bootstrap se sei fazer por mim mesmo?

Simplesmente que um client possa vim a você e querer algo específico sendo feito com o bootstrap.

Share this post


Link to post
Share on other sites
3 minutos atrás, OmarF disse:

 

Estava a responder um tópico meu quando vi a notificação.

Então... Não, você não é obrigado a aprender a usar o bootstrap, mas não deixe de aprender a usar-lo que, pode ser útil dependendo do trabalho que vá fazer.

Meu conselho é que esqueça de qualquer framework pelo por enquanto e só venha a usar quando souber caminhar com as próprias pernas, ou seja fazer tudo na mão por conta própria e não pegar algo mastigado e engolir se que me entende.

Já vi isso várias vezes acontecer de uma pessoa só aprender a suar tal coisa e quando o "bixo" pega pro lado dele ele não sabe o que fazer.

Mas enfim, como disse e acho que todo dev concordaria comigo.

- E porque então eu deveria aprender a usar o bootstrap se sei fazer por mim mesmo?

Simplesmente que um client possa vim a você e querer algo específico sendo feito com o bootstrap.

 

Ok, obrigado por responder na velocidade da luz kkk. Então acho que minha duvida foi sanada. Só mais uma coisa, existe hoje algo que supere em formatação de texto o EM/REM?

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 Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
    • By egalauber
      Tenho o seguinte trecho de código:
       
      #anima {
              width:600px;
              height:300px;
              margin:auto;
              
              animation: banner 10s infinite;
          }
       
      @keyframes banner {
              0%, 33% {
                      background:#009;
                  }
              34%, 66% {
                      background:#C00;
                  }
              67%, 100% {
                      background:#390;
                  }
          }
       
      No HTML tenho uma div com id=anima.
      Esse código faz a cada 3 segundos mudar a cor dessa div, tipo como se fosse um slide show.
       
      O que eu preciso fazer, é colocar 3 botões, cada botão mudando pra uma cor. Cada botão mudando pra um pedaço da execução do @keyframes banner.
       
      Botão1 - pula para-> 0%, 33% { background:#009; }
      Botão2 - pula para-> 34%, 66% { background:#C00; }
      Botão3 - pula para-> 67%, 100% { background:#390; }
       
      Como?
    • By Carlos Web Soluções Web
      Olá pessoal !!
      Estou desenvolvendo um menu em CSS, e eu gostaria de colocá-lo no CSS Responsive:
       
      @media screen and (max-width: 800px) {
      }
       
      O link do menu de como está atual se encontra em:
      MENU Link

      e o que eu desejo alcançar é:
      MENU RESPONSIVE

      Por favor me ajudem.....abraço !!
×

Important Information

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