Muitos alunos de web design responsivo têm dificuldade em usar porcentagens para valores de largura. Especificamente, há confusão sobre como o navegador calcula essas porcentagens. Abaixo, você encontrará uma explicação detalhada de como as porcentagens funcionam para cálculos de largura em um site responsivo.
Usando Pixels para Valores de Largura
Quando você usa píxeis como um valor de largura, os resultados são muito diretos. Se você usar CSS para definir o valor da largura de um elemento no cabeçalho de um documento em 100 pixels de largura, esse elemento será o mesmo tamanho que aquele que você definiu para 100 pixels de largura no conteúdo do site ou no rodapé ou em outras áreas da página. Os pixels são um valor absoluto, portanto, 100 pixels são 100 pixels, não importa onde um elemento apareça no documento. Infelizmente, embora os valores de pixel sejam fáceis de entender, eles não funcionam bem com sites responsivos.
Ethan Marcotte cunhou o termo “Web design responsivo”, explicando esta abordagem como contendo 3 princípios-chave:
- Uma grade fluida
- Meio fluido
- Consultas de mídia
Esses dois primeiros pontos, uma grade fluida e mídia fluida são obtidos usando porcentagens, em vez de pixels, para valores de dimensionamento.
Usando percentagens para valores de largura
Quando você usa porcentagens para estabelecer a largura de um elemento, o tamanho real que o elemento exibe irá variar dependendo de onde ele está no documento. As porcentagens são um valor relativo, o que significa que o tamanho exibido é relativo a outros elementos em seu documento.
Por exemplo, se você definir a largura de um imagem para 50%, isso não significa que a imagem será exibida na metade de seu tamanho normal. Este é um equívoco comum.
Se uma imagem tiver 600 pixels de largura, usar um valor CSS para exibi-la em 50% não significa que terá 300 pixels de largura no navegador. Este valor percentual é calculado com base no elemento que contém a imagem, não no tamanho real da própria imagem. Se o contêiner (que pode ser uma divisão ou algum outro elemento HTML) tiver 1000 pixels de largura, a imagem será exibida com 500 pixels, pois esse valor é 50% da largura do contêiner. Se o elemento contido tiver 400 pixels de largura, a imagem será exibida apenas com 200 pixels, já que esse valor é 50% do contêiner. A imagem em questão aqui tem um tamanho de 50% que depende totalmente do elemento que a contém.
Lembre-se de que o design responsivo é fluido. Layouts e tamanhos mudarão conforme o tamanho da tela / alterações de dispositivo. Se você pensar sobre isso em termos físicos, não relacionados à web, é como ter uma caixa de papelão que você está enchendo com material de embalagem. Se você disser que a caixa deve ser preenchida até a metade com esse material, a quantidade de embalagem necessária irá variar dependendo do tamanho da caixa. O mesmo vale para larguras percentuais em web design.
Porcentagens com base em outras percentagens
No exemplo de imagem / contêiner, usamos valores de pixel para o elemento que o contém para mostrar como a imagem responsiva seria exibida. Na realidade, o elemento que o contém também seria definido como uma porcentagem e a imagem, ou outros elementos, dentro desse contêiner, obteriam seus valores com base em uma porcentagem de uma porcentagem.
Aqui está outro exemplo.
Digamos que você tenha um site onde todo o site está contido em uma divisão com uma classe de “contêiner” (uma prática comum de web design). Dentro dessa divisão estão três outras divisões que você eventualmente estilizará para exibir como 3 colunas verticais.
Agora, você pode usar CSS para definir o tamanho da divisão do “contêiner” para, digamos, 90%. Neste exemplo, a divisão do contêiner não tem outro elemento que a circunda além do corpo, que não definimos com nenhum valor específico. Por padrão, o corpo será renderizado como 100% da janela do navegador. Portanto, a porcentagem da divisão de "contêiner" será baseada no tamanho da janela do navegador. À medida que a janela do navegador muda de tamanho, também muda o tamanho deste “contêiner”. Portanto, se a janela do navegador tiver 2.000 pixels de largura, essa divisão será exibida em 1.800 pixels. Isso é calculado como 90 por cento de 2.000 (2.000 x .90 = 1.800)), que é o tamanho do navegador.
Se cada uma das divisões “col” encontradas dentro do “contêiner” for configurada para um tamanho de 30%, então cada uma delas terá 540 pixels de largura neste exemplo. Isso é calculado como 30% dos 1.800 pixels em que o contêiner renderiza (1.800 x .30 = 540). Se alterássemos a porcentagem desse contêiner, essas divisões internas também mudariam no tamanho em que são renderizadas, uma vez que dependem desse elemento do contêiner.
Vamos supor que as janelas do navegador permaneçam com 2.000 pixels de largura, mas alteramos o valor percentual do contêiner para 80% em vez de 90%. Isso significa que ele será renderizado com 1600 pixels de largura agora (2000 x 0,80 = 1600). Mesmo se não mudarmos o CSS para o tamanho de nossas 3 divisões "col", e deixá-los em 30%, eles vão renderizar de forma diferente agora, pois o elemento que os contém, que é o contexto pelo qual eles são dimensionados, tem mudado. Essas 3 divisões serão agora renderizadas com 480 pixels de largura cada, o que é 30% de 1600, ou o tamanho do contêiner de 1600 x 0,30 = 480).
Indo ainda mais longe, se houvesse uma imagem dentro de uma dessas divisões “col” e essa imagem fosse dimensionada usando uma porcentagem, o contexto para seu dimensionamento seria a própria “col”. À medida que a divisão “col” mudou de tamanho, o mesmo aconteceria com a imagem dentro dela. Portanto, se o tamanho do navegador ou do "contêiner" mudasse, isso afetaria as três divisões "col", que, por sua vez, mude o tamanho da imagem dentro da “col.” Como você pode ver, todos eles estão conectados quando se trata de dimensionamento baseado em porcentagem valores.
Quando você considera como um elemento dentro de uma página da web será renderizado quando um valor de porcentagem é usado para sua largura, você precisa entender o contexto em que esse elemento reside na marcação da página.
Em suma
As porcentagens desempenham um papel crítico na criação do layout para sites responsivos. Se você está dimensionando imagens de forma responsiva ou usando larguras percentuais para fazer uma grade verdadeiramente fluida, cujos tamanhos são relativos uns aos outros, entender esses cálculos será necessário para obter a aparência que você desejo.