Adaptar pantalla a toda la resolución @Media Queries ó @Javascript

[wmdiseno]

Buenas amigo(a) muy buenas tardes a todo lo que andan leyendo mi humilde pregunta

traigo una duda, ando estresado con el cliente, que ya quiere su pagina y me entro un contratiempo que me imagino que es fatal.

me falta adaptar mi maqueta a diferente resoluciones de pantalla donde se pueda apreciar la pagina web.

de lo que eh leido. que el método Media Queries es el método mas moderno, pero lo cual no le llego a entender, si alguien me podría dar una pequeña explicación paso a paso, si hay forma de que me puedan poner un código solucionado del mismo para llegar a entenderle ala perfección, de lo que llegue a solucionar fue por mediante Javascript

Código Javascript:

<script type="text/javascript">
function comprobarScreen()
{ if(window.screen.availWidth <= 640)
{window.parent.document.body.style.zoom="62%";}
if(window.screen.availWidth == 800)
{window.parent.document.body.style.zoom="78%";}
if(window.screen.availWidth == 1024)
{window.parent.document.body.style.zoom="100%";}
if(window.screen.availWidth >= 1280)
{window.parent.document.body.style.zoom="125%";}
 
}
</script>
 

se me expandio la pantalla de resolución y se ve lleno donde antes me parecía en blanco sin embargo. se me llega a distorsionar la maqueta



Alguien que tenga tiempo de poderme decirme como le podría hacer, les agradecería
la verdad, ya no se donde buscar, ando desesperado.

[Alexis88]

Una de las ventajas de usar Media Queries en lugar de JS radica en que JS se puede desactivar del navegador, algo que no ocurre con CSS. La desventaja principal está en que los navegadores viejos no soportan las Media Queries.

Hay varias formas de trabajar con ellas, ya sea mediante anchos máximos y mínimos (max-width y min-width), la orientación del dispositivo, la proporción de aspecto del dispositivo, entre otros.

Un pequeño ejemplo:

Código CSS:

@media only screen and (min-width : 800px){
    div{
        width: 900px;
    }
}
 
@media only screen and (min-width : 350px){
    div{
        width: 450px;
    }
}
 

En este ejemplo, asigno un ancho de 900 píxeles a todos los elementos <div> cuando el ancho mínimo de la pantalla sea de 800 píxeles, mientras que le asigno 350 cuando el ancho mínimo es de 450 píxeles.

Aquí puedes ver ejemplos y explicaciones del tema.

Saludos

[wmdiseno]

Saludos Alexis 88

Gracias por responder, no se si esto lo que comentare llegue a fechar hice la maqueta en photoshop para posteriormente pasarla al dreamweaver, ¿en algo puede llegar a afectar?

esa es mi mayor preocupación, que a la mejor la maqueta. ya no sirva y eso.


Gracias!

[Alexis88]

Nunca he usado Photoshop para diseñar una web, ya me acostumbré a hacerlo con CSS. Haz la prueba y si no obtienes el resultado que esperas (que creo que así sucederá), probablemente no te quedará de otra que rehacer el trabajo con hojas de estilos.

Saludos

[wmdiseno]

Alexis88 gracias por responderme de nuevo

así tiene que quedar dentro de los parámetros de style.

Código CSS:

<style type="text/css">
 
@media only screen and (min-width : 800px){
    div{
        width: 900px;
    }
}
 
@media only screen and (min-width : 350px){
    div{
        width: 450px;
    
    }
}
</style>
 

Lo puse adentro del documento del HTML, para que me funcione mas rapido el media queries, pero sin resultado hay algo que debo de hacer? ¿aparte? disculpa por mi ignorancia, Alexis.

gracias saludos!

P.d encontre uno que ahí especifica que nomas copio y pego y LISTO! pero aun así sin resultados tampoco

este es el codigo:

Código CSS:

/* ************ Smartphones - Todos (portrait y landscape) *************** */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Estilos */
}
 
/* ************ Smartphones / Tabletas pequeñas (portrait y landscape) *************** */
@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 767px) {
/* Estilos */
}
 
/* ************ Smartphones - Todos (landscape solamente) *************** */
@media only screen 
and (min-width : 321px) {
/* Estilos */
}
 
/* *************** Smartphones - Todos (portrait nada mas) *************** */
@media only screen 
and (max-width : 320px) {
/* Estilos */
}
 
/* *************** iPads (portrait y landscape) *************** */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Estilos */
}
 
/* *************** iPads (landscape solamente) *************** */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Estilos */
}
 
/* *************** iPads (portrait solamente) *************** */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Estilos */
}
 
/* *************** Desktops and laptops *************** */
@media only screen 
and (min-width : 1224px) {
/* Estilos */
}
 
/* *************** Pantallas mas largas *************** */
@media only screen 
and (min-width : 1824px) {
/* Estilos */
}
 
/* *************** iPhone 4 *************** */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Estilos */
}
 

Abajo del blog dice que nomas lo ponga dentro de styles y Listo!
lo puse así pero aun así ni eso, funciono.

[Alexis88]

Supongo que en donde están los comentarios /* Estilos */, colocaste TUS estilos, verdad?

[wmdiseno]

Nop, alexis, mm no llego a entender, aun ando navegando en la web para llegar a entender una solución al respecto, a que te refieres?, disculpa por ser novato es mi ultimo reto.


Saludos!

P.d un ejemplo pido nomas 1 jaja

1 min despues del post:

tengo que poner los estilo css abajo de cada media queries?
pero la maquetacion no la hice en css si no en html, en puro sectores dividos de imágenes. O.o

5 min despues del post:
como puedo juntar todo para llegar a hacerlo en un solo jalón es decir, toda las imágenes y contenido para poder así modificar el tamaño?

[Alexis88]

Fíjate en el ejemplo que te mostré al inicio. Las medidas que asigno, varían según el ancho mínimo de la ventana. Eso es lo que tienes que hacer. Si un <div> se ve bien en una pantalla con 768 píxeles de ancho pero se ve mal en una de 380 (como un dispositivo móvil), entonces tienes que aplicar otras medidas para ese caso. Y lo mismo sucederá con todos los elementos que muestres.

Saludos

[wmdiseno]

sigo investigando,

si integro toda la pagina en un tabla, crees si me lo puede ajustar la pantalla?


un saludo alexis y muchas gracias!

[NueveReinas]

Por favor, deja de trabajar en tablas y aprende a maquetar con DIVs y CSS. Es un poco más complicado pero más fácil adaptarlo al modelo RWD.

[Alexis88]

Olvídate de usar tablas para maquetar tu página. Esa es una mala práctica del pasado que afortunadamente se está erradicando poco a poco gracias a la difusión del uso de hojas de estilos. Recuerda que las tablas solo deben de utilizarse para listar datos, no para maquetar toda la página.

Puede llegar a ser tedioso, pero una vez que armes tus media queries, no vas a tener que preocuparte del dispositivo que el usuario utilice para ver la web.

Saludos