Ir para conteúdo

POWERED BY:

Arquivado

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

uiLhian

Medidas "em"

Por , em Desenvolvimento frontend

Recommended Posts

uiLhian    1

uiLhian
Postado

bom dando uma pesquisada na net para tentar tornar um site 'responsivo' encontrei algumas medidas nessa forma:



font-size : 3em; /* 48 / 16 = 3 */


 


line-height: 1.052631579em; /* 40 divided by 38 */


como que faço esses tipos que cálculos existe um "padrão", tipo quero uma medida 'x' tenho que dividi tanto / por tanto...


como funciona ?


 


obrigado!


 



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

cara, 1em significa 12px se o elemento pai tiver definido como 12px.


 



logo, 2em, significa 24px, se o pai tiver 12px.


 



Mas note, isso não tem nada a ver com responsivo. Também vi uma galera indicando usar, mas acho completamente desnecessário. Já fiz sites responsivos q funcionam muito bem, apenas com auto, % e px.


 



Na minha opinião, o melhor uso de em não é para responsivo.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
uiLhian
			  

	
		
	
			 1
	
		
	

		

		

			


	
		uiLhian
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

entendi, 


é que todos os sites "responsivos" que vi por ae estão em medidas 'em'.


 


agora uma grande duvida que estou é...


pra mim ter um site "adaptavel" a varias resoluções de tela ele tem que ser "width: 100%" na div "pai" ?


 


porque tipo eu to montando um aqui e ele ta assim a estrutura


 


<body>
  <div id="corpo">
    <div id="topo">logo</div>
    <div id="conteudo">
    texto, imagens
    </div>
    <div id="rodape">bla</div>
  </div>
</body>


a css é basicamente essa


 


#CORPO, #TOPO, #TOPO h1 a, #CONTEUDO, #RODAPE 
{
position: relative;
}

#CORPO  
{
margin: 50px auto;
_width: 672px; /* Hack IE6 */
width: 672px;
min-height: 50px;
text-align: left;
background: #F4F4F4;
  display: inline-block;
  border: 1px solid #333;
}    

#TOPO 
{ 
  height: 50px;
  background: #F4F4F4; 
border-bottom: solid 1px #CFCFCF;
}

h1.logo {
width : 350px;
height : 50px;
margin : auto 0 0 10px;
padding : 0;
float : left;
display : inline;
}

h1.logo a {
display : block;
height : 100%;
text-indent : -1000px;
overflow : hidden;
background : url(../logo.png) no-repeat;
}

#CONTEUDO
{    
width : 651px;
height : auto;
margin : 10px;
background : #F4F4F4;
border: 1px solid #333;
}

#CONTEUDO, #RODAPE
{
float: left;
}

#RODAPE
{
clear : both;  
height : 50px;
margin-top : 35px;
border-top : solid 1px #CFCFCF;
background : #F5F5F5;
font-family : 'ABeeZee', sans-serif;
width: 100%;
}


ae o que acontece como pode perceber o width da id #corpo que é a principal esta com 672px;


que nem eu quero o site nesse tamanho independente da resolução ou melhor que ele seja visualizado "corretamente" em ambas resoluções... no caso se eu usasse %porcentagem por exemplo 67.2% as nas resoluções menores como celulares e tal o site não iria ficar muito "pequeno" na tela ?


 


qual melhor solução pra isso, se é que tem né... :)


 


Valeu! 



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

ok, oq acontece é q conforme vc dimunui para coisas menores que 1024, vc sobrescreve os seus 672 para auto, e não 100%, entendeu ?


 



são coisas diferentes.Vc já sabe usar media querys e a meta viewport ?



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
uiLhian
			  

	
		
	
			 1
	
		
	

		

		

			


	
		uiLhian
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

hummmm...


poderia me dar um exemplo ou me indicar algo de facil entendimento.


 


não sei ainda usar essas medidas.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

esse site aqui é responsivo:


 



http://strudelfolhadinho.com.br/



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
uiLhian
			  

	
		
	
			 1
	
		
	

		

		

			


	
		uiLhian
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

nussa fui ve o código fonte pra ter uma noção ta tudo "misturado" sem chances de entendimento... :)


 


 


ok, oq acontece é q conforme vc dimunui para coisas menores que 1024, vc sobrescreve os seus 672 para auto, e não 100%, entendeu ?


como fazer isso ?



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

é que eu passo por um minify para ter mais performance.


 


é com media queries:


http://wbruno.com.br/mobile/


 


aqui nesse trecho:


@media only screen {

eu posso definir q apartir de tal largura de pagina, eu mude os estilos de alguns elementos.

			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
uiLhian
			  

	
		
	
			 1
	
		
	

		

		

			


	
		uiLhian
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

o que seria isso ?


 


@media only screen {}


 


isso aqui é padrão ?


<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />


 


que nem no caso de um site "reponsivo"



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

putz.. vamos do começo então.


 


Essa meta viewport, serve para indicar que a relação da largura do dispositivo, seja de 1 para 1.


Pois por exemplo, o iphone tem 320px de largura, mas consegue mostrar sites com 960px, pois a densidade de pixels dele é alta.


 


isso aqui:


@media only screen {}


 


é uma media query, é com ela que eu consigo altera estilos dos elementos de acordo com a largura da pagina. Exemplo:


.column-full { width: 960px; }
@media only screen and (max-width: 740px){
	.column-full { width: 740px; }
}
@media only screen and (max-width: 660px){
	.column-full { width: auto; }
}



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Marcos Xavier
			  

	
		
	
			 189
	
		
	

		

		

			


	
		Marcos Xavier
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Sobre as medidas


http://www.w3.org/Style/Examples/007/units.pt_BR.html


http://maujor.com/tutorial/medidascss.php


http://riddle.pl/emcalc/


http://pxtoem.com/


http://tableless.com.br/unidade-pixels-em-rem/#.UVBSODebQeM


 


Como chegar nesse resultado:


48px / 16px  = 3 (3em = 48px)


 


Você quer usar as medidas em, então vamos dar nome aos bois:


48px= medida que você quer transformar;


16px=tamanho da fonte em px que representa 1em


Então temos a fórmula:


X em= medida desejada em px / 16


 


font-size : 1em; */16 / 16 = 1 */



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

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

			

			

				  Aceito