1

Olá, estive aprendendo um pouco sobre sites responsivos, e.. até agora as únicas soluções que encontrei foram, colocar estilos diferentes para cada tamanho.

e.. a porcentagem, que ao meu ver seria o mais correto, não precisaria de 3 ou mais estilos, apenas um.

sou novato, posso estar falando besteira, queria dicas, e se possível, qual o calculo que deve ser feito para fazer essa conversão pixel para porcentagem.

1

3 Respostas 3

5

Transformação de pixel em porcentagem é bem simples. Basta usar a formula objeto : contexto = resultado x 100.

Exemplo prático:

Não fez o menor sentido? É, para mim também não fez a primeira vez que eu li. Vamos adiantar um pouquinho a prática e pensar no seguinte: temos uma div de largura 1128px. Dentro dela uma coluna com 264px de largura. A coluna é, portanto filha do container. Então vamos pegar o valor em px da coluna (objeto = 264px) e dividir pelo valor em pixel do elemento pai (contexto = 1128px). O resultado deu 0,23404255319149. Agora basta andar duas casas para a esquerda com a virgula e acrescentar um ponto que temos o valor 23.404255319149. E esta é a correspondência da nossa coluna em porcentagem: 23.404255319149%. Este número é realmente grande e a tentação é grande para chamar de 23% e acabar com a história. Mas, se você arredondar, uma hora a soma vai quebrar. Computadores são bem mais exatos que a gente. Eles sabem lidar bem com matemática…

Fonte:https://tableless.com.br/design-responsivo-na-pratica-2-layout-ao-html/

-1

Impossível. Pixel está relacionado a qualidade da imagem e % está relacionado a área da tela que o objeto vai ocupar, independente do tamanho. São coisas diferentes.

Para converter Pixels para %, você precisa saber a largura exata da tela em px, para então relacionar o tamanho do objeto com o total de espaço disponível.

Mas se o assunto o é RESPONSIVIDADE, significa que você pretende criar algo genérico para rodar em diversos tipos de tela. Nesse caso, descarte pixels de vez e utilize medidas que se adaptam ao tamanho da tela, como '%', 'em' entre outros.

E para casos específicos, onde determinada formatação de conteúdo fica bem em resoluções maiores, mas não se adapta a resoluções menores, utilize este recurso: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp. Nesse caso seriam os "3+ estilos" que você citou, mas em alguns casos é necessário".

2
  • certo, o que seria 'em'? um tipo de parâmetro do css? o seu segundo parágrafo, ele é muito utilizado? ou é obsoleto? e uma ultima pergunta, poderia me indicar algum livro, ou link para estudo a fundo de responsividade? Obrigado. 4/02/2017 às 1:16
  • Sobre medidas do CSS: w3.org/Style/Examples/007/units.pt_BR.html. Tem toda a documentado na internent. Não sou muito fã de livros na área de informática. Pois eles ficam desatualizados muito rapidamente.
    – mau humor
    4/02/2017 às 23:29
-1

800 width = 100% ... cada item do menu tem 70px.

800 = 100 70 = x 800x = 7000 x = 7000 / 800 x = 8,75%

Peguei de um fórum a resposta sobre os pixels que eu estava com dúvida.

Basicamente você pega o valor total em pixel definido no seu Layout adiciona 00(2 ZEROS) ao valor que queira saber a porcentagem, e divide pelo valor total do Layout.

Exemplo: O Layout tem um tamanho total de 940px. Você adicionou um elemento dentro desses 940px de tamanho 180px, ADICIONE 00(2 ZEROS) ao tamanho adicionado(180px) isto é, "180 + 00" = 18000 e divide o valor dessa "soma" pelo valor total do Layout. 18000/940 = 19%

3
  • Acho que a pergunta era referente a uma forma padrão, utilizada em qualquer tipo de resolução.
    – mau humor
    4/02/2017 às 23:31
  • 1
    sim, você já respondeu, estou só complementando, para futuros usuários que tem a mesma duvida. 5/02/2017 às 1:37
  • Ok, ta certo...
    – mau humor
    5/02/2017 às 1:46

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .