GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Converter px em % CSS

java
Tags: #<Tag:0x00007f7aaf89a298>

#1

Ilustres boas,

Pretendo converter algumas unidades, ou seja, eu tenho 270px quero passar em %, como faço?
Já vi alguns exemplos que usam a regra de três simples mas porém não bate certo porque a página não se ajustou conforme estava com 270px

Abraços!


#2

Olá, Bruno!

Para fazer a conversão de pixels para porcentagem você tem que levar em conta o pai do elemento, saca? Vou dar um exemplo visual pra você entender. Observe a figura 1. Nela nós temos:


1 - Eu tenho uma div com a classe “.pai” e outra, dentro dessa com a classe “.filho”.
2 - A classe “.pai” tem 1000px de largura e a “.filho” tem 200px de largura.

Se eu quero converter as medidas da div “.filho” para porcentagem eu tenho que levar em conta as dimensões da div “.pai”.
Quando definimos que uma div tem largura em porcentagens, como 10%, 20%, 30%, 90%, etc. estamos dizendo que queremos que ela tenha 10%, 20%, 30% da largura do pai dela!

Se definirmos que a div “.filho” terá largura de 70%…

.filho { width: 70%; }

…estamos dizendo que ela terá 70% de 1000px (largura da div “.pai”), portanto ela terá 700px de largura como você pode ver na figura 2.

O cuidado que você tem que tomar é o seguinte:
Se o elemento pai não tiver largura definida, o elemento filho usará como base as larguras do pai do elemento pai (ou do elemento avô), e assim sucessivamente. Se não encontrar nenhum elemento superior com largura definida, ele terá como base o elemento body.

Espero ter ajudado!


#3

Melhor explicação!!! :ok_hand: