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!

Estudia sobre media-quries.

Saludos

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?

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...

 
.contenedor {width:50%;}
.contenedor img {
   width:100%;
   max-width:1000px; /* Tamaño máximo */
}
 
@media all (max-width:720px){
   .contenedor {width:25%;}
}

Saludos