DÊVIDA CRUEL EM CSS3

KELLY 28/04/2015 18:09:30
#446209
Boa noite meus queridos colegas!

Estou estudando algumas sintaxe em CSS3 e por precisar usar tão pouco, nunca me deparei com um exemplo que me deixou com uma grande dúvida na sua finalidade. Pesquisei em alguns sites a fim de esclarecer essa minha dúvida, inclusive no www.w3shools.com e nada de sanar a minha dificuldade.
No exemplo abaixo, eu tenho um trecho do código que contém essa linha width: 30em, pesquisei em vários lugares o significado deste tipo de medida em (em), mas ainda continuo sem entender.
Alguém mexe bastante com CSS3 e poderia me explicar melhor qual a sua finalidade? Segue um exemplo da w3shools com essa linha:



<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 30em;
border: 1em solid;
}

div.box {
box-sizing: border-box;
width: 50%;
border: 1em solid red;
float: left;
}
</style>
</head>
<body>

<div class=[Ô]container[Ô]>
<div class=[Ô]box[Ô]>This div occupies the left half.</div>
<div class=[Ô]box[Ô]>This div occupies the right half.</div>
<div style=[Ô]clear:both;[Ô]></div>
</div>

</body>
</html>
FILMAN 28/04/2015 18:23:11
#446210
Veja se te ajuda

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

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

http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/
KELLY 29/04/2015 01:14:55
#446211
Ainda estou com dúvidas
TUNUSAT 29/04/2015 08:32:18
#446218 Resposta escolhida
KELLY,

Traduzindo livremente a página da [Ô]w3schools[Ô], [ô]em[ô] significa: [Ô]Relativo para o tamanho da fonte do elemento ([ô]2em[ô] significa 2 vezes o tamanho da fonte atual)[Ô]. Neste site tem um [Ô]TRY IT[Ô] (EXPERIMENTE)

Estava brincando agora com este trecho:
p {
font-size: 16px;
line-height: 1em;
}

Mude o [ô]1em[ô] para [ô]2em[ô] e uma terceira vez para [ô]3em[ô]. Cada vez que mudar, clique no botão [Ô]See Result[Ô] (Veja o Resultado) e verá que o espaçamento entre linhas aumenta.
Brinque também com este trecho:
div {
font-size: 3em;
border: 1px solid black;
}

Mude o [ô]font-size[ô] (tamanho da fonte) na unidade [ô]em[ô].

DICA DO SITE: As unidades [ô]em[ô] e [ô]rem[ô] são práticas na criação de layout perfeitamente escalável!

======================================================

http://www.w3schools.com/cssref/css_units.asp

Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente a unidade de comprimento.
[th][/th]




[td]vh, vw [td]20.0

Unidade de Comprimento Chrome I.E. Firefox Safari Opera
em, ex, %, px, cm, mm, in, pt, pc [td]1.0 3.0 1.0 1.0 3.5
ch [td]27.0 9.0 1.0 7.0 20.0
rem [td]4.0 9.0 3.6 4.1 11.6
9.0 19.0 6.0 20.0
vmin [td]20.0 9.0* 19.0 6.0 20.0
vmax [td]26.0 Não suporta 19.0 Não suporta 20.0

Nota: O Internet Explorer 9 suporta vmin com o nome padronizado: vm.

* Comprimentos relativos
Unidades de comprimento relativo especificam um comprimento relativo para outra propriedade de comprimento. Unidades de comprimento relativo dimensiona melhor entre médiuns de renderização diferentes.
[th][/th]

[td]em

[/td]
[/td]
[/td]
[/td]
[/td]
[/td]
Unidade Descrição[td]
Relativo para o tamanho da fonte do elemento (2em significa 2 vezes o tamanho da fonte atual) EXPERIMENTE
ex Relativo para a altura x da fonte atual (raramente usado) EXPERIMENTE
CH Relativo à largura do [Ô]0[Ô] (zero)[td]
rem Relativo ao tamanho da fonte raiz do elemento[td]
VW Relativo a 1% da largura do viewport[td]
VH Relativo a 1% da altura do viewport[td]
Vmin Relativo a 1% da menor dimensão do viewport[td]
VMAx Relativo a 1% da maior dimensão do viewport[td]
%


Dica: As unidades em e rem são práticas na criação de layout perfeitamente escalável!

* Comprimentos absolutos

As unidades de comprimento absolutas são fixos e um comprimento expressado em qualquer um desses vai aparecer como exatamente desse tamanho.

Unidades de comprimento absolutas não são recomendadas para uso na tela, porque os tamanhos de tela variam tanto. No entanto, pode ser usados se a mídia de saída é conhecida, tais como layout de impressão.
[th][/th]






UnidadeDescrição
cmcentimetersEXPERIMENTE
mmmillimetersEXPERIMENTE
ininches (1in = 96px = 2.54cm)EXPERIMENTE
px *pixels (1px = 1/96th of 1in)EXPERIMENTE
ptpoints (1pt = 1/72 of 1in)EXPERIMENTE
pcpicas (1pc = 12 pt)EXPERIMENTE


* Pixels (px) são relativos para os dispositivos de visualização. Para dispositivos de baixo dpi (dot per pixel), 1px é um dispositivo pixel (ponto) do display. Para impressoras e telas de alta resolução 1px implica vários pixels de dispositivo.

[][ô]s,
Tunusat.
KELLY 02/05/2015 01:20:20
#446278
TUNUSAT eu gostei da sua explicação, mas qual o sentido de usar esse tipo de medida [Ô]em[Ô]? Eu não poderia simplesmente informar um tamanho em pixel, centímetros ou pontos?
TUNUSAT 02/05/2015 07:28:25
#446279
KELLY,

A explicação nem foi minha, foi da [ô]w3schools[ô] (http://www.w3schools.com/), KKKKK!

Agora sério, deixa eu colocar meu ponto de vista na mesa. Talvez nem tenha algo a haver.... Então senta que lá vem história! KKKKK! Eu disse que agora é sério!!! Sem rir! (os dois últimos parágrafos eu estou escrevendo para mim mesmo, favor desconsiderar)

Bom, ...
... cada programador aprende com um professor diferente (ou até sem professor) em uma escola diferente (ou até em nenhuma escola).
Um programador e um professor são seres humanos, bom ... por enquanto, vai saber no futuro ... cada ser humano, tem um gosto diferente, uma forma de ver a vida diferente, um jeito que gosta mais diferente, algo que acha mais fácil e outra pessoa acha mais difícil de fazer. Se você misturar tudo isto com alunos e professores e linguagens (mesmo que seja uma linguagem de marcação) que permitem você fazer as coisas de várias formas diferentes, alterando pouco o resultado final, deixando tudo [Ô]transparente[Ô] para o usuário, então terá milhares de combinações de código fonte final, todas funcionando corretamente. Para o usuário funciona e para muitos gerentes está bom assim. Não importa se vai impactar em velocidade de processamento durante todo o tempo de vida do sistema, na humanidade é algo que vemos não chama a atenção, pois o gasto de analisar isto a curto prazo e resolver [Ô]não compensa[Ô] (entre aspas pois depende muito de política ... sua imagem fica manchada, você é visto como mau gerente, mau programador...).
Um exemplo:
A prova da Microsoft para certificação usa isto como uma [Ô]pegadinha[Ô], várias vezes mais de uma resposta está correta e funciona, mas tem a forma que a Microsoft acha melhor, mais limpa, mais rápida e somente esta resposta está certa no ponto de vista deles.
Um exemplo pessoal:
No começo da minha carreira fiz uma função de regra de negócio que só usava [Ô]IF[Ô], eu não sabia usar bem o [Ô]FOR[Ô] e nem o [Ô]WHILE[Ô]. A função era muito rápida, muito fácil de entende e fazer manutenção, mas era ENORMMMME! KKKKK! Um amigo meu viu e mudou-a, diminuindo-a de tamanho absurdamente, mas eu percebi que ela ficou mais complicada de entender e um pouco mais lenta...

[][ô]s,
Tunusat.
FILMAN 02/05/2015 15:05:42
#446291
Boas palavras TUNUSAT

Resumindo tudo a explicação é clara:

em
Relativo para o tamanho da fonte do elemento (2em significa 2 vezes o tamanho da fonte atual)

Qual a fonte original do elemento, conforme demonstração do código abaixo:
p {
    font-size: 16px;
    line-height: 1em;
}


Quando focê coloca a expressão acima no CSS, qualquer elemento(TAG) <p> terá uma fonte de 16px, ou seja 16px é fixo para qualquer acesso de Browser.

Imagina você vendo 16x no monitor de seu computador, mas agora imagine você vendo 16px na tela de um celular de 5 polegadas com o aparelho em pé.

Ai é que entra o em, nada mais do que um percentual sobre o tamanho padrão determinado na aplicação.
Nessa caso se em uma página colocarmos o seguindo código aaixo notaremos a diferença.

<html>
<head>
	<title>TESTE de tamanho px/em</title>
	<style>
		p {
			font-size: 16px;
		}
		
		.muda_tamanho_em {
			font-size: .5em; 
			//Esse valor assumirá 50% do tamaho padrão que é 16px então terá um tamanho de 8px
		}
		
		.muda_tamanho_8px {
			font-size: 8px !important;
		}
	</style>
</head>
<body>
	<div style=[Ô]width: 100%; background-color: red !important;[Ô]>
		<div style=[Ô]float:left; width: 80%; height: 100px; margin-left: 10%;  background-color: #aaa; overflow: auto;[Ô]>
			<p>
				Esse é o meu tamanho original de 16px.<br />
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE 
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE 
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE 
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE.
			<p>
		</div>
		<div style=[Ô]float:left; width: 35%; height: 100px; margin-left: 10%; margin-top: 50px; border: solid 1px black; overflow: auto;[Ô]>
			<p class=[Ô]muda_tamanho_em[Ô]>
				Esse é o meu tamanho proporcionado sobre o tamanho original de 16px.<br />
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE 
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE 
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE 
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE.
			<p>
		</div>
		<div style=[Ô]float:left; width: 35%; height: 100px; margin-left: 5%; margin-top: 50px; border: solid 1px black; overflow: auto;[Ô]>
			<p class=[Ô]muda_tamanho_8px[Ô]>
				Esse é o meu tamanho com a class de 8px.<br />
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE 
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE 
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE 
				TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE TESTE.
			<p>
		</div>
	</div>
</body>
</html>


Creio que com essa explicação fique mais facil de entender. Espero ter ajudado!
KELLY 02/07/2015 17:51:19
#448424
Obrigada pessoal pelas explicações e desculpe a demora na resposta!!
Tópico encerrado , respostas não são mais permitidas
Voltar