mejor solucion para adaptar html a varias resoluciones

gAb1 · 22 Abril 2014, 15:08 PM

Hola, acaba de terminar una pagina web, pero la he hecho con mi resolución 1080p y aunque se que muchas personas utilizan esta resolución en sus ordenadores, todavía hay pantallas y ordenadores portátiles que no soportan full hd y a la pagina le salen las barras de scroll (arriba y abajo / a los lados) y rompe todo el diseño...

Me gustaría saber cual sería la solución más sencilla para adaptar una pagina html con css para que se viera bien, por lo menos en las resoluciones de portatiles y algunos dispositivos moviles como tablets. La idea es que sea compatible a partir de 720p (no esta pensada la navegación de esta web para resoluciones menores).

Supongo que sería cambiando el weight a % o usar distintas hojas de estilo para cada resolución, hacer un script en html->head para que según la resolución detectada, cargue unas hojas de estilo u otras. O si hay una manera mas sencilla o mejor, estoy abierto a sugerencias.

Sería cuestión de redimensionar las imágenes y reposicionarlas, porque la pagina esta toda hecha con imágenes y animaciones (algún texto en tablas, pero el tamaño del texto se puede cambiar automáticamente con javascript)

Muchas gracias!

basickdagger · 22 Abril 2014, 16:25 PM

usa diseño responsivo y porcentajes...

#!drvy · 22 Abril 2014, 16:31 PM

Estudia sobre media-quries.

Saludos

Pablo Videla · 22 Abril 2014, 23:26 PM

http://getbootstrap.com/

Es completamente responsivo, pero es como para crear una web desde 0 con eso.

Y no se si es la mejor solución.

gAb1 · 23 Abril 2014, 00:40 AM

Creo que voy a usar diferentes hojas de estilo... quiero asegurarme de que todo queda en su sitio y con un tamaño adecuado... creo que con una resolución de 720p tiene que ser suficiente para la mayoría de pantallas no full hd. Como ya he dicho, no es un diseño pensado para pantallas pequeñas.

En cuanto al script, seria algo tan simple como un if y un else, no? En lo que tengo dudas es en el contenido del if y del else, que tengo que poner directamente el código html para llamar las hojas de estilo? o para que lo interprete tiene que tener otra cosa?

basickdagger · 23 Abril 2014, 19:23 PM

Cita de: gAb1 en 23 Abril 2014, 00:40 AM
Creo que voy a usar diferentes hojas de estilo... quiero asegurarme de que todo queda en su sitio y con un tamaño adecuado... creo que con una resolución de 720p tiene que ser suficiente para la mayoría de pantallas no full hd. Como ya he dicho, no es un diseño pensado para pantallas pequeñas.

En cuanto al script, seria algo tan simple como un if y un else, no? En lo que tengo dudas es en el contenido del if y del else, que tengo que poner directamente el código html para llamar las hojas de estilo? o para que lo interprete tiene que tener otra cosa?

yo te aconsejo que utilizes las medias querys pq a mi ver es como un if..

si la pantalla es de X tamaño aplica este estilo si aumenta aplica este otro... ejemplo...

Código (css) [Seleccionar]


//toma todo el width de la pantalla
#Bloque_div{
 width:100%;
}
 
// si la pantalla llega a 720px cambia le tamaño del div...
@media (max-width: 720px) {
         #Bloque_div{   width:720px; }  
 
}

ya te tocaria a ti darle cierto estilo como cambiar tamaño de letra, la fuente, posiciones de imagenes, todo lo que se te ocurra... etc etc..

saludos!

gAb1 · 24 Abril 2014, 17:59 PM

Lo que es seguro para poder adaptar la pagina a monitores 720p o mas es que las imágenes tienen que ser más pequeñas para caber todas en el espacio.

Lo que quería saber es si es posible cambiar el tamaño de las imágenes, porque lo único que se cambia es el ancho y alto del cuadrado donde están metidas, quiero decir, yo redimensiono a mano desde el editor web las imágenes y lo que cambia no es la imagen, si no el contenedor donde esta la imagen y si la imagen entera no cabe en el contenedor solo se muestra una parte. Creo que se debe a que lo que cambia es el div, no la imagen. ¿Que tengo que hacer en este caso? usar otra etiqueta? o me toca sacar todas las imágenes de css a html...

basickdagger · 24 Abril 2014, 18:43 PM

Edit: Editare y te pondre un ejemplo...

Código (css) [Seleccionar]



<html>
<body>
   <style>
   
#Bloque_div{
 width:100%;
overflow:auto;
}
#Bloque_div img{
 width:500px;
}
 

@media (max-width: 720px) {
         #Bloque_div{   width:720px;border:blue solid 1px; }
         #Bloque_div img{   width:200px; float:left;}  
 
}
@media (max-width: 420px) {
    #Bloque_div{   width:420px;border:red solid 1px; }
         #Bloque_div img{   width:100px; float:right;}  
}
 
   </style>

Código (html4strict) [Seleccionar]


   <div id="Bloque_div">
    <img src="http://www.elhacker.net/foro/YaBBImages/avatars/super_bu.jpg">
   </div>
</body>
</html>

lo que estoy diciendo es
a mi div le doy el 100% de ancho, y overflow:auto, para que crezca el height, y a la imagen interna solo 500px
cuando el tamaño del navegador/pantalla sea maximo 720px
el div cambiara del ancho a 720 y se coloreara el borde en azul...
la imagen tomara el tamaño de 200px y se colocara en el lado izquierdo...

si el tamaño del navegador/pantalla sigue decrementando y llega maximo 420px
el div cambiara del ancho a 420 y se coloreara el borde en rojo...
la imagen tomara el tamaño de 100px y se colocara en el lado derecho...

y asi puedes ir dando los estilos que desees...

saludos!

#!drvy · 24 Abril 2014, 18:57 PM

Código (css) [Seleccionar]



.contenedor {width:50%;}
.contenedor img {
   width:100%;
   max-width:1000px; /* Tamaño máximo */
}

@media all (max-width:720px){
   .contenedor {width:25%;}
}

Saludos

gAb1 · 25 Abril 2014, 01:22 AM

¿Eso lo tendría que hacer con cada una de las imágenes? ¿Se puede hacer lo que decís sin tener que llamar la imagen en el html? Lo digo porque además de eso queda más limpio utilizar la función hover que onmouseover y out... Me gusta que el html quede lo más limpio posible hehe

@#!drvy ¿Ese código es para ponerlo en una etiqueta que envuelva todo? ¿O para cada una por separado?

Por ejemplo el logo:

Código (css) [Seleccionar]


#logo {
 background: url(../img/logo/logo.png) no-repeat;
 position: absolute;
 left: 55px;
 top: 40px;
 width: 63px;
 height: 74px;
 z-index: 18;
}

#logo:hover {
 background: url(../img/logo/logo-light.png) no-repeat;
}

Lo siento, nunca había trabajado con esa opción de CSS y estoy muy perdido

¿Hay alguna ventaja entre trabajar con class o id?