Trabalhando com porcentagens

Quando trabalhos com design responsivo, uma das primeiras coisas que devemos colocar na cabeça é que vamos trocar, SEMPRE QUE POSSÍVEL, o uso de medidas estáticas (pixels, por exemplo) por medidas dinâmicas, ou seja, por porcentagem, e podemos ver no código abaixo um exemplo de como as meninas estáticas podem ser nossas inimigas:

HTML:
<div class='container'>
<div class='colEsq'>
Texto esquerda 1
<br />
Texto esquerda 2
<br />
Texto esquerda 3
<br />
Texto esquerda 4
<br />
Texto esquerda 5
<br />
</div>
<div class='colDir'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices ultricies tincidunt. Nam eu hendrerit orci. Quisque non ipsum mi. Mauris in vulputate diam. Aliquam erat volutpat. Vivamus cursus volutpat nisi, fringilla sodales quam congue et. Nulla in tellus arcu. Aliquam sagittis placerat feugiat.
<br />
Suspendisse volutpat justo arcu, ac congue urna congue ac. Suspendisse at elementum libero. Nulla sed mi euismod dolor tincidunt vestibulum. Sed nulla nunc, varius in dapibus eget, interdum sed justo. Suspendisse maximus elit nulla, rutrum laoreet metus condimentum id. Phasellus ut justo blandit, euismod libero nec, hendrerit velit. Proin blandit risus eget elit ultricies, non interdum eros pharetra. Praesent lacinia aliquam felis quis pharetra. Donec vitae enim dolor. Curabitur eu commodo nibh.
</div>
</div>

CSS:
.container {
width: 100%;
}

.container div {
float: left;
border: 1px solid #000000;
box-sizing: border-box;
}

.container .colEsq {
width: 420px;
}

.container .colDir {
width: 930px;
}

Esse código gera o seguinte resultado no navegador, e no emulador do Samsung Galaxy S5, tanto na vertical quando na horizontal:

Como podemos ver, num navegador com viewport de 1350px de largura ou mais, a página é totalmente demonstrada e fica harmoniosa, entretando, numa tela menor, seja na horizontal quanto na vertical, os blocos saem da formatação, além de não caberem totalmente na tela, gerando uma barra de rolagem horizontal.
Como resolver esse problema? Exatamente, PORCENTAGEM!
Para esses casos temos que usar um pouco de matemática, mas nada que seja tão difícil de aplicar. Vamos usar as seguintes medidas do exemplo anterior:
Bloco esquerdo: 420px
Bloco direito: 930px
Total: 1350px

Para transformarmos isso em porcentagem vamos utilizar a seguinte fórmula:
(tamanho do bloco/total) * 100

Assim temos os seguintes valores:
(420/1350) * 100 = 31.11%
(930/1350) * 100 = 68.88%

Com esses valores podemos alterar nosso CSS para o seguinte:

.container {
width: 100%;
}

.container div {
float: left;
border: 1px solid #000000;
box-sizing: border-box;
}

.container .colEsq {
width: 31.11%;
}

.container .colDir {
width: 68.89%;
}

E com isso, teremos o seguinte resultado nos navegadores com viewports diferentes:

Como visto no exemplo acima, o conteúdo ainda não ficou num formato totalmente adequado, mas o uso de porcentagem faz nosso código ser mais adaptável a diferentes dispositivos e tamanhos sem perder sua formatação.
Nos próximos posts vamos dar outros exemplos do que pode ser feito com o uso da porcentagem para deixar o site ainda mais organizado em dispositivos menores.