Ajustar texto

mariomon17 · #1 (**permalink**) 03/02/2012, 16:05

Hola a todos, visitando la maravillos pagina

http://html5please.us/

He he encontrado con que al reducir el tamaño de la ventana, el texto se adapta al ancho de esta.

He revisado el CSS pero no encuentro como lo han hecho.
Seguro que es una tonteria, pero no lo encuentro.

Muchas gracias.
Un saludo :)

cristian_cena · #2 (**permalink**) 03/02/2012, 17:17

googlea:
"media-queries css"
"responsive web design a list apart"

mariomon17 · #3 (**permalink**) 04/02/2012, 13:32

No era eso lo que buscaba, pero gracias por la informacion, gran articulo el que me pasastes.

Era algo tan tonto como que los elementos no tienen un width definido por lo que se adaptan siempre al width del navegador.

Un saludo :)

cristian_cena · #4 (**permalink**) 04/02/2012, 15:03

Ok, me alegra que lo hayas resuelto.
Supongo que sabrás pero por las dudas, toda caja de bloque tomará por defecto un width: 100%; hasta que indiques lo contrario.

furoya · #5 (**permalink**) 04/02/2012, 20:21

Buena política la de listar palabras clave que sirvan de guía en la búsqueda.

Igual ahora yo vengo a poner un ejemplo, aprovechando que el tema me recordó que ya hace mucho había guardado un código (creo que de Microsoft) porque me gustó la simpleza conque habían resuelto el "autoajuste de font-size".

Por supuesto que el ejemplo era tan viejo que al probarlo arrancó en IE 6, y en ningún otro. Así que lo reescribí para hacerlo compatible. Espero que funcione en todos.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>AJUSTA TEXTO AL TAMAÑO DEL DOCUMENTO.</title>
<script type="text/javascript">
var ajuste = 4;

function muestraHora()
{
    var s = Date(); //alert(s);
    var t = s.split(":");
    var t0 = t[0].split(" ");
        t0 = t0[t0.length-1]; //alert(t0)
    var t1 = t[1]; //alert(t1)
    var t2 = t[2].split(" ")[0]; //alert(t2)

    var altoDoc = (window.innerHeight)? window.innerHeight : document.body.clientHeight;
    var anchoDoc = (window.innerWidth)? window.innerWidth : document.body.clientWidth;

    if ((altoDoc*ajuste)>anchoDoc)
    altoDoc = anchoDoc / ajuste;
    document.getElementById("HMS").innerHTML = t0 + ":" + t1 + ":" + t2;
    document.getElementById("HMS").style.fontSize = altoDoc - 2 + "px";

    setTimeout(muestraHora , 1000);
}

onload = muestraHora;
onresize = muestraHora;
</script>
<body>
<center id="HMS">&nbsp;</center>
</body>
</html>

Supongo que a alguien le servirá.

mariomon17 · #6 (**permalink**) 05/02/2012, 20:53

Cita:

Iniciado por cristian_cena

Ok, me alegra que lo hayas resuelto.
Supongo que sabrás pero por las dudas, toda caja de bloque tomará por defecto un width: 100%; hasta que indiques lo contrario.

Si, pero ultimamente siempre necesito fijar tamaños por lo que habia pasado por el alto eso.

Un saludo :)