Porcentagens para cálculos de largura em um site responsivo

Muitos estudantes de web design responsivo têm dificuldade em usar porcentagens para valores de largura. Especificamente, há confusão com a maneira 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 pixels como um valor de largura, os resultados são muito diretos. Se você usar CSS para definir o valor de largura de um elemento no cabeçalho de um documento para 100 pixels de largura, esse elemento terá o mesmo tamanho que você definiu para 100 pixels de largura no conteúdo ou no rodapé do site ou em outras áreas do página. Os pixels são um valor absoluto, portanto, 100 pixels é 100 pixels, não importa em que lugar do documento um elemento apareça. 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 essa abordagem como contendo três princípios principais:

1. Uma grade fluida
2. Meios fluidos
3. Consultas de mídia

Esses dois primeiros pontos, uma grade fluida e meios fluidos são obtidos usando porcentagens, em vez de pixels, para dimensionar valores.

Usando porcentagens para valores de largura

Quando você usa porcentagens para estabelecer uma largura para um elemento, o tamanho real exibido pelo elemento varia 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 uma imagem para 50%, isso não significa que a imagem será exibida com metade do tamanho normal. Este é um equívoco comum.

Se uma imagem tiver nativamente 600 pixels de largura, usar um valor de CSS para exibi-la em 50% não significa que ela terá 300 pixels de largura no navegador da Web. Esse valor percentual é calculado com base no elemento que contém essa imagem, não no tamanho nativo da própria imagem. Se o contêiner (que pode ser uma divisão ou outro elemento HTML) tiver 1.000 pixels de largura, a imagem será exibida em 500 pixels, pois esse valor é 50% da largura do contêiner. Se o elemento que contém tiver 400 pixels de largura, a imagem será exibida apenas em 200 pixels, pois esse valor é 50% do contêiner. A imagem em questão aqui tem um tamanho de 50% que depende completamente do elemento que a contém.

Lembre-se, o design responsivo é fluido. Layouts e tamanhos serão alterados conforme o tamanho da tela / dispositivo mudar. Se você pensar sobre isso em termos físicos, não-web, é como ter uma caixa de papelão que você está enchendo com material de embalagem. Se você disser que a caixa deve estar cheia pela metade com esse material, a quantidade de embalagem necessária varia de acordo com o tamanho da caixa. O mesmo vale para larguras percentuais em web design.

Percentagens Baseadas em Outras Percentagens

No exemplo de imagem / contêiner, usamos valores de pixel para o elemento de contenção para mostrar como a imagem responsiva seria exibida. Na realidade, o elemento contêiner também seria definido como uma porcentagem e a imagem, ou outros elementos, dentro desse contêiner, obteria seus valores com base em uma porcentagem de uma porcentagem.

Aqui está outro exemplo que mostra isso na prática.

Digamos que você tenha um site em que todo o site esteja contido em uma divisão com uma classe de "contêiner" (uma prática comum de design da Web). Dentro dessa divisão, há três outras divisões que você acabará por estilizar para exibir como 3 colunas verticais. Esse HTML pode ser assim:

Agora, você pode usar CSS para definir o tamanho da divisão "contêiner" para dizer 90%. Neste exemplo, a divisão de contêiner não possui outro elemento que a circunda além do corpo, o qual não definimos para nenhum valor específico. Por padrão, o corpo será renderizado como 100% da janela do navegador. Portanto, a porcentagem da divisão "contêiner" será baseada no tamanho da janela do navegador. À medida que a janela do navegador muda de tamanho, o tamanho desse "contêiner" também aumenta. Portanto, se a janela do navegador tiver 2000 pixels de largura, essa divisão será exibida a 1800 pixels. Isso é calculado como 90% de 2000 (2000 x 0,90 = 1800)), que é o tamanho do navegador.

Se cada uma das divisões “col” encontradas dentro do “contêiner” estiver definida para um tamanho de 30%, cada uma delas terá 540 pixels de largura neste exemplo. Isso é calculado como 30% dos 1800 pixels que o contêiner processa em (1800 x .30 = 540). Se alterássemos a porcentagem desse contêiner, essas divisões internas também seriam alteradas no tamanho que elas renderizam, pois elas dependem daquelas que contêm o elemento.

Suponhamos que as janelas do navegador permaneçam com 2000 pixels de largura, mas alteramos o valor percentual do contêiner para 80% em vez de 90%. Isso significa que renderizará agora 1600 pixels de largura (2000 x 0,80 = 1600). Mesmo se não alterarmos o CSS para o tamanho de nossas 3 divisões “col” e deixá-las em 30%, elas serão processadas de forma diferente agora, já que seu elemento de contenção, que é o contexto pelo qual elas são dimensionadas, foi alterado. Essas 3 divisões agora renderizarão como 480 pixels de largura cada, o que equivale a 30% de 1600, ou o tamanho do container (1600 x .30 = 480).

Levando isso ainda mais adiante, 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 o próprio “col”.Como essa divisão “col” mudou de tamanho, o mesmo aconteceria com a imagem dentro dela. Então, se o tamanho do navegador ou do “container” mudasse, isso afetaria as três divisões “col”, o que, por sua vez, mudaria o tamanho da imagem dentro do “col.” Como você pode ver, estas são todas conectado quando se trata de valores de dimensionamento orientados por porcentagem.

Quando você considera como um elemento dentro de uma página da Web será processado quando um valor percentual é 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 fundamental na criação do layout de sites responsivos. Se você está dimensionando imagens de maneira responsiva ou usando larguras percentuais para criar uma grade realmente fluida cujos tamanhos são relativos um ao outro, a compreensão desses cálculos será necessária para obter a aparência desejada.