Solucionado
Olá, estou tendo um problema para conversão dos valores.
Para conversão de pixel para em eu defino um valor no CSS como valor 1 e partir dele eu defino os outros. O problema está quando eu preciso definir um valor em ou rem a partir de uma porcentagem
main {
float: left;
width: 85%;
padding-bottom: 60px;
}Como iniciar essa conversão ? ou melhor ? como definir um valor do padding-botom sem bugar a pagina inteira ?
Pelo que eu entendi você quer transformar os 85% da width em REM e os 60 padding-bottom em %, é isso ?
Na verdade não, eu precisava transformar o width de % para em e o padding-bottom de px para em tambem. Estava com duvida somente de como fazer essa conversão. Mas depois que fiz alguns testes, defini um valor para o padding e dai consegui fazer a conversão do width.
@Linneu, se conseguiu resolver seu problema, marque a resposta que te ajudou como solução, mesmo que seja a sua! Se quiser ajudar ainda mais os outros usuários, explique detalhadamente como você solucionou o seu problema =)
Linneu por qual razão você preferiu definir o width de % para em ?
Era uma duvida se isso era possível. Acabei transformando o padding-bottom de px para em e mantive o width em % mesmo assim.
main { float: left; width: 85%; padding-bottom: 1.5em; }
Entendi, para essas conversões existem fórmulas:
Vamos utilizar o seguinte exemplo:
<div class="principal">
<p>Ola esta é a div principal.</p>
<div class="filho">
<p>Ola esta é a div filho, onde o meu pai é a principal.</p>
</div>
</div>
div.principal {
background: #000000;
color: #FFFFFF;
font-size: 20px;
margin: 0 auto;
padding: 16px;
width: 400px;
}
div.filho {
background: #FFFFFF;
color: initial;
font-size: 12px;
margin: 10px;
padding: 15px;
}A idéia é trocar responsivar o design trocando todas as unidades fixas(px) para (rem e %).
div.principal {
background: #000000;
color: #FFFFFF;
font-size: 1.25rem; // 20 / 16 = 1.25
margin: 0 auto;
padding: 1rem; // 16 / 16 = 1
width: 80%; // Testando manualmente até chegar nos 80%
}
div.filho {
background: #FFFFFF;
color: initial;
font-size: .75rem; // 12 / 16 = 0.75
margin: 2.5%; // 10 / 400 = 0.025 * 100 = 2.5
padding: .9375rem; // 15 / 16 = 0.9375
}Para converter px em rem basta dividir o valor alvo(px) por 16. Para converter px em % basta dividir o valor alvo(px) pelo width do elemento pai e multiplicar o resultado por 100.
Veja o exemplo, caso não entenda as conversões me avise.
Sempre utilizo esses fórmulas nos meus desenvolvimentos.
Fiz um post no meu blog referente a isso, se quiser dar um olhada:
http://www.matheuscastiglioni.com.br/Convertendo-layout-fixo-para-responsivo
buguei.
em uma certa questão, pede que que se troque tadas as medidas de pixel, por outras mais flexíveis, mas acho que primeiramente deveriam deixar mais claro como se faz essa giringonça.
POIS É