elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Sigue las noticias más importantes de seguridad informática en el Twitter! de elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  mejor solucion para adaptar html a varias resoluciones
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: mejor solucion para adaptar html a varias resoluciones  (Leído 5,131 veces)
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
mejor solucion para adaptar html a varias resoluciones
« en: 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!


En línea

basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
Re: mejor solucion para adaptar html a varias resoluciones
« Respuesta #1 en: 22 Abril 2014, 16:25 pm »

usa diseño responsivo y porcentajes...


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: mejor solucion para adaptar html a varias resoluciones
« Respuesta #2 en: 22 Abril 2014, 16:31 pm »

Estudia sobre media-quries.

Saludos
En línea

Pablo Videla


Desconectado Desconectado

Mensajes: 2.274



Ver Perfil WWW
Re: mejor solucion para adaptar html a varias resoluciones
« Respuesta #3 en: 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.
En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mejor solucion para adaptar html a varias resoluciones
« Respuesta #4 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?
En línea

basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
Re: mejor solucion para adaptar html a varias resoluciones
« Respuesta #5 en: 23 Abril 2014, 19:23 pm »

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
  1. //toma todo el width de la pantalla
  2. #Bloque_div{
  3. width:100%;
  4. }
  5.  
  6. // si la pantalla llega a 720px cambia le tamaño del div...
  7. @media (max-width: 720px) {
  8.         #Bloque_div{   width:720px; }  
  9.  
  10. }
  11.  
  12.  

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!
En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mejor solucion para adaptar html a varias resoluciones
« Respuesta #6 en: 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...
En línea

basickdagger


Desconectado Desconectado

Mensajes: 650


System.out.println("this is weird as fuck");


Ver Perfil
Re: mejor solucion para adaptar html a varias resoluciones
« Respuesta #7 en: 24 Abril 2014, 18:43 pm »

Edit: Editare y te pondre un ejemplo...


Código
  1.  
  2. <html>
  3. <body>
  4.   <style>
  5.  
  6. #Bloque_div{
  7. width:100%;
  8. overflow:auto;
  9. }
  10. #Bloque_div img{
  11. width:500px;
  12. }
  13.  
  14.  
  15. @media (max-width: 720px) {
  16.         #Bloque_div{   width:720px;border:blue solid 1px; }
  17.         #Bloque_div img{   width:200px; float:left;}  
  18.  
  19. }
  20. @media (max-width: 420px) {
  21.    #Bloque_div{   width:420px;border:red solid 1px; }
  22.         #Bloque_div img{   width:100px; float:right;}  
  23. }
  24.  
  25.   </style>
  26.  
Código
  1.   <div id="Bloque_div">
  2.    <img src="http://www.elhacker.net/foro/YaBBImages/avatars/super_bu.jpg">
  3.   </div>
  4. </body>
  5. </html>
  6.  
  7.  
  8.  


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!
« Última modificación: 24 Abril 2014, 18:59 pm por basickdagger » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: mejor solucion para adaptar html a varias resoluciones
« Respuesta #8 en: 24 Abril 2014, 18:57 pm »

Código
  1.  
  2. .contenedor {width:50%;}
  3. .contenedor img {
  4.   width:100%;
  5.   max-width:1000px; /* Tamaño máximo */
  6. }
  7.  
  8. @media all (max-width:720px){
  9.   .contenedor {width:25%;}
  10. }

Saludos
En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: mejor solucion para adaptar html a varias resoluciones
« Respuesta #9 en: 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
  1. #logo {
  2. background: url(../img/logo/logo.png) no-repeat;
  3. position: absolute;
  4. left: 55px;
  5. top: 40px;
  6. width: 63px;
  7. height: 74px;
  8. z-index: 18;
  9. }
  10.  
  11. #logo:hover {
  12. background: url(../img/logo/logo-light.png) no-repeat;
  13. }
  14.  

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

¿Hay alguna ventaja entre trabajar con class o id?
« Última modificación: 25 Abril 2014, 01:29 am por gAb1 » En línea

Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Mejor solución para alimentación de un portatil.
Electrónica
Epsiloom 0 1,836 Último mensaje 9 Abril 2006, 02:25 am
por Epsiloom
Windows 9 soportará resoluciones 8K con un mejor escalado
Noticias
wolfbcn 0 1,112 Último mensaje 20 Septiembre 2014, 14:08 pm
por wolfbcn
Como adaptar mi app para todas las resoluciones de celulares en android studio
Java
rafa1997 0 1,969 Último mensaje 2 Septiembre 2015, 21:52 pm
por rafa1997
Mi experiencia con Metro Vacuum Datavac ( LA MEJOR SOLUCIÓN PARA LIMPIEZA PC ) « 1 2 3 4 »
Hardware
Eleкtro 39 17,669 Último mensaje 15 Junio 2017, 13:47 pm
por Manatidoble
adaptar codigo html a angular
Desarrollo Web
Beginner Web 2 2,780 Último mensaje 22 Mayo 2020, 04:45 am
por Beginner Web
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines