Foro de elhacker.net

Hola,

Estoy desarollando una web responsive con bootrap 3. Todo va como la seda pero al abrirla desde un smartphone creo que la letra queda demasiado pequeña.
Si modifico su tamaño queda demasiado grande en pantalla grande (pc/tablet).

Al no poder modificar las media queries para aplicar tamaño de letra responsive, ya que el código de bootsrap esta enlazado al CDN de google, no sé como hacerlo.

Alguien sabe que se suele hacer en estos casos??

Un saludo y gracias

Tus media-queries siempre tienen prioridad sobre las de bootstrap (mientras tu archivo css se cargue despues del de bootstrap).


La solucion normalmente se basa en utilizar em o rem como puntos de tamaño y aplicar X rm a cada tipo de resolucion.

Por ejemplo:

body { font-size: 16px; }
.texto { font-size: 1em; }
 
@media (max-width: 320px) {
   .texto { font-size: 2em; }
}

En este caso, en una pantalla grande la clase .texto tendrá un tamaño de fuente de 16 pixeles mientras que si la pantalla tiene una resolución <= 320px de ancho, tendrá un tamaño de 32px.

Da igual lo que diga bootstrap mientras tu hoja de estilos se cargue despues de la suya.

Saludos

Me olía que la cosa podía ir por ahí pero no estaba seguro.

La cosa es que todos los tamaños de letra ya los tengo en px primero y después en em, por si el navegador no reconociese los em.
El tema era que a pesar de estar así la letra seguía siendo pequeña. Imagino que el tamaño por defecto de body debe no ser sufciciente y luego las proporciones ya las toma sobre un tamaño pequeño por eso se me ocurrió modificar las media queries pero no sabía si podía "machacar" las de bootstrap sin que eso afectase en nada al diseño.

Pues probaré a ver...

Muchas gracias #drvy!!!

No te preocupes por las unidades em, hasta Internet Explorer 3 (ya va por la 11) los reconoce.

Saludos