Tutorial: Titulos Responsive

Ya se ha hablado mucho acerca del tema responsive, pero tambien he visto muchos sitios que se adaptan para verse en un movil, pero el titulo no, esto hace que la navegación sea más dificil, imagínate titulos con letras 28 en teléfono puede hacer que tenga un CRT bajo, para ello esta un codigo muy bueno.

Con este codigo los títulos ya no van a ser grandes, sino que se van adaptar segun la pantalla de dispositivo, es muy sencillo para implementarlo. Te vas al CSS de tu tema, lo abres y le pegas estas lineas al final, lo guardas y listo, puedes entrar desde tu smartphone y vas a ver que ya no hay letras grandes, ademas que las puedes cambiar segun como tu digas. Como lo dije esto puede ayudar para que los anuncios tengan una mejor visibilidad sin la necesidad de que los usuarios hagan scrol.

/*By jjames forobeta*/ [MENTION=16931]medi[/MENTION]a only screen and (max-width: 720px)
{
h1{font-size:28px;}
h2{font-size:26px;}
}
[MENTION=16931]medi[/MENTION]a only screen and (max-width: 640px)
{
h1{font-size:26px;}
h2{font-size:24px;}
}
[MENTION=16931]medi[/MENTION]a only screen and (max-width: 480px)
{
h1{font-size:24px;}
h2{font-size:22px;}
}
[MENTION=16931]medi[/MENTION]a only screen and (max-width: 320px)
{
h1{font-size:18px;}
h2{font-size:16px;}
}

Gracias por el aporte. Ayer mismo estaba buscando algo similar 😉

Genial un código muy útil, gracias por el aporte.

gracias lo reviso luego.

Muy útil gracias :encouragement:

Pero si lo trabajes en

em

Hacer clic para expandir...

no es necesario usar tanto codigo Ejemplo:

Y en el móvil se reducirá... o me equivoco, claro siempre y cuando este configurado el html con el scale

De igual manera... una recomendación sería no usar px, cuando haces una web responsive. Agregando esta info a tu tutorial.

[MENTION=37120]jjames[/MENTION] Gracias 🙂

CrewArty dijo:

Pero si lo trabajes en no es necesario usar tanto codigo Ejemplo:

Insertar CODE, HTML o PHP:

<style>

h1{font-size:0.8em;}

h2{font-size:0.5em;}

</style>

Y en el móvil se reducirá... o me equivoco, claro siempre y cuando este configurado el html con el scale

De igual manera... una recomendación sería no usar px, cuando haces una web responsive. Agregando esta info a tu tutorial.

Hacer clic para expandir...

La ventaja del codigo de arriba es que tu configuras el tamaño de la letra segun tu gusto, en cambio de esta manera no funciona todas las veces, en todos los navegadores.

jjames dijo:

La ventaja del codigo de arriba es que tu configuras el tamaño de la letra segun tu gusto, en cambio de esta manera no funciona todas las veces, en todos los navegadores.

Hacer clic para expandir...

Que buena observación, :encouragement::encouragement:

Es que mas bien se trate al revés que al usar el movil no se escale la fuente porque se haría menor, se trata de que sea más grande y se lea más cómodamente.