Ajustar pagina a todas las resoluciones

AitorLopez · #1 (**permalink**) 08/09/2010, 02:32

Hola. Se trata de conseguir lo siguiente.

En una pagina como esta

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
</head>
<style>
 
body {
    width:100%;
    background-color: #727ea0;
    font-size:100%;
}
 
#contenedor {
    width: 90%;
    background-color: #f7f8ff;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
#contenedor_1 {
    background-color: #FF6699;
    width: 50%;
}
h2 {
font-size:200%;
}
 
</style>
 
<body>
 
<div id="contenedor">
 <div id="contenedor_1">
    <h2>Probando cosas</h2>
 </div>
</div>
 
</body>
</html>

si yo voy encogiendo la pantalla (ya sabeis, pinchar en una esquina e ir haciendo mas pequeña), el div cabecera va empequeñeciendo a la vez, y siempre mantiene su tamaño al 80% del body, es decir, de la pantalla.

Ahora bien, no ocurre lo mismo con el tamaño de letra, no se va empequeñeciendo a la vez que hago pequeña la pantalla, y esto es lo que quiero conseguir, si es posible, pero no se como.

Gracias. Un saludo.

angelAparicio · #2 (**permalink**) 08/09/2010, 05:03

En CSS no se puede, que yo sepa.

Shaito · #3 (**permalink**) 08/09/2010, 08:55

Hola!

Conozco un método manual para aumentar o disminuir la letra.. pero es manual.

Si alguien sabe como modificarlo para que se haga automático al redimensionar la ventana aquí dejo el code:

Código Javascript:

Ver original<script type='text/javascript'>
//<![CDATA[
var tgs = new Array( 'div','td','tr');
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
//]]>
</script>

Y en el HTML o PHP ponemos los botones para agrandar o menguar el texto:

Código HTML:

Ver original<a href="javascript:ts('body',1)">A+</a> <a href="javascript:ts('body',-1)">a-</a>

También los puedes poner en forma de imagen:

Código HTML:

Ver original<a href="javascript:ts('body',1)"><img src="URL DE LA IMAGEN DE AUMENTAR TAMAÑO"/></a><a href="javascript:ts('body',-1)"><img src="URL DE LA IMAGEN DE DISMINUIR TAMAÑO"/></a>

---------------------
Fuente: http://www.latrucotecadeblogs.com/2009/07/codigo-para-aumentar-disminuir-tamano.html

TheDark03 · #4 (**permalink**) 08/09/2010, 09:32

Hola, he leído tu anterior Post y como te han dicho no vas a encontrar la respuesta en este foro... y también creo que anteriormente ya te han explicado respecto a las unidades de medida...

en tu codigo tu defines al body el tamaño de letra 100%, esto dependiendo del navegador que usen para ver tu web el 100% que estableces va ser el tamaño que por defecto tenga dicho navegador...

reitero que tu respuesta que buscas no la encontraras en este foro.

Saludos DTB

Shaito · #5 (**permalink**) 08/09/2010, 09:58

Como yo dije, automaticamente no lo encontrará... no se si ni en este foro o donde..

El caso es que lo más parecido sería el code que yo di, quizás no el más indicado pero puede que el más acertado.

Lo que no entiendo es la utilidad de la redimension automatica de la letra.. me dices del fondo y.. pues vale.. pero de la letra.. Siempre se puede usar el viejo truco del Control + La rueda del raton =P

AitorLopez · #6 (**permalink**) 08/09/2010, 11:07

Hola.
En primer lugar, comentar que el codigo de los botones funciona, aunque como dijo Shaito, "no es el mas indicado, pero puede que el mas acertado".

En segundo lugar, con respecto a lo comentado por thedark 03, ya que has leido el otro post, podrías haber mencionado que sacaba la duda de allí porque este post esta un poco liado, entre otras cosas por una discusión que ocurrió en el mismo y que no tenia mucho que ver con el asunto del post.

En tercer lugar, Shaito, "Siempre se puede usar el viejo truco del Control + La rueda del raton =P", desafortunadamente, no todo el mundo lo conoce como parece que lo conoces tu. Piensa que un usuario de una pagina, es igual que otro tanto si sabe mucho como si no sabe nada, y creo que nuestro trabajo, por lo menos el mio, es facilitarles las cosas el máximo posible, entre otras cosas para que vuelva a visitarte.

Por último, comentar que el efecto exacto que quiero conseguir es precisamente el que hace el "Control + etc, etc, etc" (aunque automático, claro), y pensaba que, aunque efectivamente ha habido gente que ha comentado que no se podría conseguir, entre todos podríamos llegar (de ahí mi insistencia), por lo menos a acercarnos, que entre otras cosas supongo que este es uno de los fundamentos de esta web, el ayudarse mutuamente y crear codigo libre para que todo el mundo pueda usarlo.

En cualquier caso, y ya acabo, os doy las gracias a los dos por vuestras aportaciones, y bueno, yo por lo menos, voy a intentar seguir con este tema a ver si soy capaz de conseguir esto, espero que con ayuda de algún experto, que por mi experiencia en este foro, hay bastantes por aquí.

Un saludo.