Ir para conteúdo

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!

Compartilhar este post


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

Compartilhar este post


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

Compartilhar este post


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

Compartilhar este post


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

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 Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por Raphaeldidata
      Vamos supor que eu coloque uma logomarca no topo do meu site, e queira dar semântica à ela. Tudo bem se eu fizer dessa forma? Existe uma maneira mais simples?
       
      Basicamente criei um cabeçalho para minha logomarca, de forma a dar importância e contexto para que o "robo" do Google, por exemplo, tenha mais facilidade em interpretar o "conteúdo" da minha imagem e conseguir catalogá-la adequadamente em seu motor de buscas. 
      span.td-visual-hidden { display: none; } <div class="td-header-logo"> <h1 class="td-logo"> <a href="#"> <img src="_images/defesa-evangelho.png" alt="Defesa do Evangelho" title="Defesa do Evangelho"/> <span class="td-visual-hidden">Defesa do evangelho</span> </a> </h1> </div> Desde já agradeço!
    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por bessa238
      Bom dia galera, estou tendo um problema com meu código, eu trago os dados do banco mas tenho 2 SELECT dependentes, um com estado e a cidade, segue o código
                  $.when(                 $('#estado').val(data.estado), //o valor da option no select estado ( já está preenchido com os values desde o carregamento da página ) é setado.                 $('#estado').change()) //o método change() é chamado para que o carregamento das cidades no select 2 ( cidades ) é feito.             .then(function() {                 $('#cidade').val(data.cidade); //deveria setar a cidade vinda do banco como a option no select.             }); funcional apenas até a parte do $('#estado').change(), a cidade ( vinda do banco ) é até setada por um breve momento, questão de 0,25 segundos, depois o valor que aparece na cidade é alterado e setado como a primeira option dentre todas opções do select. Alguém já passou por tal problema ? estou a um tempo atrás de solução e não consigo obter nenhuma resposa, porém sei que é possível fazer como isso é apenas um formulário de cadastro para edição, muitos outros sistemas e sites usam este recurso. Desde já, obrigado a todos !
×

Informação importante

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