texto com Media Querie - (Texto Responsivo)

[SaulMendes 0]

Pessoal, estou trabalhando em cima de um tema só que surgiu a dificuldade em diminuir o texto para torna-lo responsivo.

 

Estou usando o seguinte código porem sem sucesso.

 

 

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    p{
        font-size: 14px;
    }
}


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    p{
        font-size: 13px;
    }
}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    p{
        font-size: 11px;
    }
}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    p{
        font-size: 7px;
    }
}

Tentei todos juntos e este abaixo sozinho. Porem sem sucesso também.

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    p{
        font-size: 11px;
    }
}

Sem ser chato mas já sendo, gostaria de saber como fazer isso e se existe a possibilidade de direcionar este estilo só para alguns textos.

Caso não seja possível aceito compactar todos. Abraço e obrigado.

 

 

[L. Henrique 179]

Antes de tudo, seu código parece estar funcionando perfeitamente. Veja aqui seu código no JSFiddle, e por conta disso eu não entendi muito o "sem sucesso".

 

Se você quiser direcionar esse estilo pra textos específicos, você precisa adicionar uma class específica pra esse texto e adicionar seu estilo dentro do media query ou se os textos tiverem uma classe pai, você pode utilizar o pseudo-elemento nth-child.

Exemplos:

• Texto com classe específica: JSFiddle.
• Texto com nth-child: JSFiddle.
  

[rikaschmitt 54]

Você pode utilizar algum plugin jQuery que faça todo o ajuste da fonte, mas isso pode pesar o seu site. Eu tentei usar uma vez e odiei. Ou você pode fazer desse jeito que você tentou, atribuindo um valor de font-size para cada resolução desejada.

 

Não funcionou?

Pelo que entendi, você pode criar uma classe padrão, exemplo "font-resize", e atribuir essa classe para os elementos que você deseja ter esse controle de tamanho.. e nos @media definir os tamanhos.

 

Eu utilizo um método que, para a minha necessidade, funciona bem. Eu utilizo valores em "rem" (as vezes até "em" serve) para os font-size e utilizando @media eu atribui um font-size para o body/html.

[SaulMendes 0]

Obrigado pelas respostas amigos.

 

Eu tentei com rem mas me perdi nas %. No total fazendo pelo menos esse beta em media queries já da tempo de estudar rem. Acredito que o problema persiste. O que não agrada é o titulo gigante e quebrando a linha.

 

Veja o exemplo:

 

Acredito que já ajudaria bastante conseguir aplicar o media em h1, h2, h3....

Como seria um exemplo de código para aplicar especificamente nessas referências?

 

Obrigado e abraço.

Nota: Com o Smartphone na horizontal o texto não quebra mas a fonte fica do mesmo tamanho também.

[L. Henrique 179]

Pra aplicar especificamente nessas referências, você precisa chamá-las dentro de seus media queries e atribuir propriedades pra cada uma.

Ex.:

@media screen and (max-width: 700px) {
   h1 { font-size: 3rem; }
   h2 { font-size: 2rem; }
   h3 { font-size: 1.5rem; }
}

@media screen and (max-width: 500px) {
   h1 { font-size: 2rem; }
   h2 { font-size: 1.5rem; }
   h3 { font-size: 1rem; }
}

Pra tornar o código mais limpo (ao invés de ficar replicando a mesma coisa), você pode tentar trabalhar com pre-processors (pré processadores). Os mais conhecidos (ou disponíveis até) são: SASS, LESS, Compass e Stylus.

[SaulMendes 0]

Obrigado Henrique, consegui resolver com sua dica em (rem).
Muito obrigado mesmo.