Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

webipsum

Redimensionar fonte em layout fluído?

Por , em Desenvolvimento frontend

Recommended Posts

webipsum    0

webipsum
Postado

Boa noite.

Estou fazendo um layout fluído e quase tudo está dando certo, ou seja, as imagens redimensionam até um limite (min e max), porém como faço para redimensionar a fonte?

Gostaria que a fonte fosse redimensionada quando ocorrer o redimensionamento da DIV.

Grato pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webipsum    0

webipsum
Postado

Diéssica.

Estou usando a fonte em %, porém quando redimensiono a janela do browser a fonte não redimensiona.

O mesmo ocorre quando testo em outra resolução... a fonte continua do mesmo tamanho.

Pesquisei sobre layouts fluídos e os que encontrei o texto flue na DIV porém não se redimensiona.

1) Conhece algum tutorial que trate a respeito de dimensionamento de fontes em função da resolução?

2) E dimensionamento de fontes em função da diminuição da janela do browser?

Grato pela sua habitual atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

webipsum, é trabalhar com porcentagem mesmo .... poste um link pro pessoal ver o que está acontecendo :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

A pergunta foi: "Gostaria que a fonte fosse redimensionada quando ocorrer o redimensionamento da DIV."

 

Definir tamanho de fonte com valor relativo, tal como porcentagem ou em faz com que o tamanho da fonte seja calculado em relação ao tamanho de fonte do elemento-pai e não em relação às dimensões do elemento-pai (ou ancestral).

Portanto, porcentagem não responde à pergunta.

 

A pergunta continua sem resposta.

E, eu pergunto: É possível fazer o que o webipsum pretende, com CSS?

 

Veja a resposta aqui: http://www.w3.org/TR...#font-size-prop

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

A saida então seria usar como no exemplo o font-size: larger como mostrado no exemplo ?

 

Não!

A melhor maneira de responder uma questão simples como esta é criar um contexto que represente o problema e tentar resolver.

Para essa questão:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fórum iMasters - font-size</title>
<style>
div {
width:70%; 
font-size:120%;
background:yellow;
}
div p {font-size:80%;}
</style>
</head>
<body>
<div>
Texto dentro de DIV
<p>Texto dentro de P</p>
</div>
</body>
</html>

Crie essa página e comece a experimentar as definições de fonte que você acha

que resolve o problema. Se encontrar, poste a resposta.

 

Redimensione a janela do navegador para ver se a fonte muda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

webipsum    0

webipsum
Postado

Maujor.

Grato pela sua atenção, mestre!

Fiz o que sugeriu (criei a página) porém não consegui evoluir, pois mesmo redimensionando o navegador, a fonte continua do mesmo tamanho.

Testei uma solução JavaScript que faz esse redimensionamento, porém não funciona 100%... Ou seja, nem sempre aumentava adequadamente e quando o browser é reduzido a fonte é reduzida infinitamente... Mesmo a DIV tendo um min-width a fonte continuava reduzindo até "sumir".

Abraços.

Nota ao Maujor: A parte do assunto deste tópico, gostaria de acrescentar que estou começando a olhar mais de perto JavaScript e o seu livro JavaScript Guia do Programador é meu recurso para leitura e pesquisa...

Compartilhar este post

Link para o post
Compartilhar em outros sites

webipsum    0

webipsum
Postado
...http://fittextjs.com/...

André Campos.

Creio que o fittextjs resolverá o problema, porém, por enquanto, notei que ele só atua nos <h1>, <h2>, <h3>, <h4>, <h5>, <h6> e <p>.

Não consegui fazer redimensionamento na fonte do <a>, nem usando o <span>. Continuarei testando.

Grato pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito