Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Nesse caso e melhor deixar em pixel ou usar alguma medida relativa?

Boa noite, minha dúvida é em relação ao uso de medidas relativas para os códigos abaixo, qual é a forma mais adequada?

CSS que deixa ícones das redes sociais como hyperlinks.

.icones-redes-sociais a {
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -99999px;
}

CSS que deixa o navegação-site na posição correta. Nessa parte do código a minha dúvida é em relação aos 310px de distancia do top da página.

.navegacao-site {
    width: 15%;
    position: relative;
    top: 310px;
}
2 respostas
solução!

Olá Leonardo, Não há uma resposta absoluta para isso, depende muito do seu design, mas há algumas coisas que você pode levar em consideração.

Por exemplo a navegação que acredito ser uma coluna lateral possui uma largura de 15% do tamanho da janela, e está afastada do topo por 310px.

Acredito que haja algo acima dela que possua 310px nem que seja um espaço em branco. Neste caso se este elemento sempre for 310px você pode usar 310px sem problemas, caso esse elementos seja redimensionado ou possua uma altura baseada em unidades relativas seria melhor mudar essa medida para unidades relativas.

Em relação aos icones você pode usar medidas relativas nada impede você também de usando medidas relativas especificar um max-width/max-height ou min-width/min-height em pixels para evitar que se perca legibilidade ou que se estore na tela.

É importante no entanto pensar na composição geral, até quanto isso pode crescer? Isso deve crescer? Em alguns casos como rodapés com alturas fixas e larguras relativas você pode ter icones que não mudam de tamanho, apenas acompanham um determinado posicionamento na tela, por exemplo ficar a 10px ou 20% da margem direita do container que eles estão.

Pense como você quer que o seu layout se comporte antes de começar a programa-lo, isso ajuda você a visualizar o que você quer.

Se necessário crie algumas comps de tamanho diferente no Photoshop/Illustrator ou outro programa para testar sua ideia com os demais elementos do layout antes de iniciar a codificar o CSS.

Embora desenhar no Navegador seja interessante se você já tiver uma comp a experimentação com um novo arquivo PSD ou AI seria mais rápida nestes programas.

Obrigado pela resposta Rafael, compreendi bem o que foi dito. Em relação ao max-width/max-height e min-width/min-height, eu não conhecia essas funcionalidades e parecem ser bem uteis.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software