Uma das técnicas adaptativas de design da web é definir o tamanho dos elementos de marcação.
como uma porcentagem do tamanho do contêiner que os contém. Desse modo, é obtido um redimensionamento proporcional de todos os elementos ao redimensionar a janela do navegador. Se apenas as dimensões horizontais forem especificadas, como para o layout da página, quando for importante posicionar os elementos horizontalmente corretamente, podemos obviamente prever quais serão os tamanhos horizontais reais dos elementos. No entanto, provavelmente, não podemos dizer nada com antecedência sobre suas dimensões verticais (é claro, se as alturas não estiverem definidas explicitamente). A partir daqui segue a seguinte tarefa - como manter as proporções dos elementos?
Um exemplo simples da prática. A página consiste em três colunas: menu vertical esquerdo, imagem, menu vertical direito.
Ao redimensionar a janela, a imagem deve se esticar (encolher), permanecendo no espaço entre os menus esquerdo e direito. Por sua vez, os itens de menu devem ser representados por áreas quadradas, que devem permanecer quadradas quando a janela é redimensionada:
Podemos representar nossa página com duas listas não ordenadas e uma imagem no meio:
<ul class="left-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul> <div class="picture"> <img src="img/fox.jpg"> </div> <ul class="right-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul>
definindo a largura das listas para 4%:
.left-navigation, .right-navigation { width: 4%; list-style: none; float: left; padding-left: 0; margin: 0; } .right-navigation { float: right; } .left-navigation li, .right-navigation li { border: 1px solid black; cursor: pointer; }
e fotos 92%:
.picture { box-sizing: border-box; padding: 30px; width: 92%; float: left; } .picture img { width: 100%; }
Como resultado, a página ficará assim:
A imagem e o menu serão redimensionados quando a janela for redimensionada, no entanto
pode ser visto que os itens do menu não são quadrados. Isso é natural, porque tudo o que fizemos foi definir a largura do menu como uma porcentagem, deixando a altura dos itens à mercê do algoritmo de renderização.
Obviamente, você pode definir as dimensões do item de menu explicitamente em unidades absolutas. Eles adquirirão a forma quadrada desejada, mas o layout perderá propriedades adaptativas. Apenas indique a altura em porcentagem:
width: 4%; height: 4%;
também não é uma solução, porque a largura e a altura do elemento pai (e, no nosso caso, é corpo) geralmente não são as mesmas.
A solução para esse problema é baseada no fato paradoxal de que os preenchimentos dentro do elemento de marcação, se expressos como porcentagem, são calculados em relação à largura desse elemento. O paradoxo é que essa afirmação é verdadeira não apenas para os recuos horizontais:
padding-left, padding-right
, mas também recuo vertical:
padding-top, padding-bottom
A próxima coisa que precisamos é do pseudo-seletor :: after. Ele adicionará um pseudoelemento de altura zero dentro do nosso elemento esticado ao longo da largura. Se definirmos padding-top ou padding-bottom como pseudoelemento para 100%, o valor de indent será definido igual à largura do pai (o elemento esticado, li no nosso caso).
.left-navigation li:after, .right-navigation li:after { content: ''; display: block; padding-bottom: 100%; }
Como resultado, a altura do elemento esticado se tornará igual à sua largura e os itens de menu se tornarão quadrados:
Para adicionar conteúdo dentro de um item de menu, usamos posicionamento absoluto:
.left-navigation li a, .right-navigation li a { position: absolute; margin-left: 2%; margin-top: 2%; } .left-navigation li a img, .right-navigation li a img{ transform: translate(-50%, -50%); }
Como resultado, a página assumirá o formato desejado:
E o mais importante, os itens de menu permanecerão quadrados quando a janela for redimensionada.