0

Tenho um link com um texto que fica normal ao ser exibido no pc,porém, muito grande para celulares (onde eu iria usar só uma sigla). Preciso de uma maneira de mudar o texto de acordo com o tamanho do display. Já procurei saber como escrever textos com css, pois desta forma basta usar media queries para exibir apenas o css que eu preciso em cada tamanho de tela, mas li que escrever textos com:

:before {
    content: "- ";
}

não é recomendado. Me ajudem por favor, o site que estou desenvolvendo é este aqui,quero modificar a aba "os comitês". Como é o primeiro site q estou criando, n sei mta coisa (inclusive js),então tem como fazer isso só com bootstrap, css e html?

4
  • O boostrap possui classes que você pode utilizar para mostrar ou ocultar conteúdo de acordo com a resolução, veja essa resposta. Commented 17/05/2017 às 17:17
  • E voce nao precisa escrever texto pelo CSS pra isso, basta definir o tamanho usando media query referente a classe. Ex: @media(max-width: 900px){ .classe{ font-size: 10px; } } Commented 17/05/2017 às 17:22
  • 1
    muito obrigado @PedroCamaraJunior era isso mesmo que eu pracisava Commented 17/05/2017 às 18:22
  • obrigado a todos que ajudaram Commented 17/05/2017 às 18:23

2 Respostas 2

3

Usando o media query você pode definir o controle do tamanho da tela e aplicar estilos conforme tal.

Ex: um h1 meu eu uso 5em em telas grandes, mas ficarão grande de mais no mobile, então basta usar o media query para diminuir o tamanho dele quando minha tela for menor que 1000px

Então, para isso podemos usar vários media query.

max-width: 500px; 
max-width: 1000px; 

E assim em diante, para ser aplicado vários estilos diferente

    @media(max-width: 500px){
    .texto{
        font-size: 10px;
        color: black;
    }
   }

https://jsbin.com/pocudi/2/edit?css,output

8
  • Poderia falar um pouco mais sobre como funcionam e se possível dar outros exemplos de uso? Commented 17/05/2017 às 17:39
  • jsbin.com/pocudi/2/edit?css,output Commented 17/05/2017 às 17:51
  • 1
    So testar o link a cima, deixando a janela do navegador maior e menor Commented 17/05/2017 às 17:52
  • Eu sei como funciona, mas não basta apenas uma resposta vaga, quanto mais completa sua resposta mais ela irá colaborar para que outras pessoas que a vejam possam compreende-la e aperfeiçoar-se assim. Portanto se puder deixar sua resposta melhor terei todo prazer em dar +1. Commented 17/05/2017 às 18:26
  • eu fiz um exemplo para que fosse auto explicativo, mas vamos la, usando o media query voce pode definir o controle do tamanho da tela e aplicar estilos conforme tal. Ex: um h1 meu eu uso 5em em telas grandes, mas ficarao grande de mais no mobile, entao é so usar o media query para diminuir o tamanho dele quando minha tela for menor que 1000px. Commented 17/05/2017 às 18:29
0

Pelo que entendi, você gostaria de exibir somente uma sigla quando fosse no Celular, correto?

Se esse for o caso, você poderia simplesmente criar classes específicas de display em media queries. Por exemplo: você poderia ter uma classe mobile e/ou desktop.

Poderia deixar seu texto dessa forma:

<p>Texto a ser exibido no desktop. <span class="visible-mobile">Texto visível somente no celular</span>
</p>

Depois seria só montar o seu CSS de acordo:

.desktop {
    display: block; /* inline, inline-block */
}
.mobile {
    display: none;
}

@media(max-width: 480px) {
    .desktop{
        display: none;
    }
    .mobile {
        display: block; /* ou inline, inline-block */
    }
}

Exemplo:

.desktop {
  display: block;
  /* ou inline, inline-block */
}

.mobile {
  display: none;
}

@media(max-width: 480px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
    /* ou inline, inline-block */
  }
}
<p><span class="desktop">Texto a ser exibido no desktop.</span> <span class="mobile">Texto visível somente no celular</span>
</p>

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