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