Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje03-12-2012, 21:52 (UTC)    
Título del mensaje: [Aporte] - Tutorial medio - Web flexible o responsive design

Esto es para los usuarios que manejan un poco el css , aunque el código sea sencillo

¿Que es una web flexible o responsive design?

Una web flexible o responsive design es aquella página que se adapta a las resoluciones de cualquier navegador de manera eficaz.

Parece que sea un trabajo descomunal , lo es , pero efectivo seguro.

Muy bién comenzemos el verdadero tutorial

¿Averiguando resoluciones de pantalla?

Existen dos programas muy buenos que sirven para ver como quedaría nuestra página en otras resoluciones.

Son

-Windows Resizer (Extensión para google chrome)
-Opera Mobile Emulator

Ahora vamos a por el codigo

Primero para que el código sea aceptado por el móbil tendremos que poner esto por encima de la página.

Código:
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /></meta>


El css que muestro a continuaciín es el ejemplo que utilizaremos para la adpatación.

min-width:Es la menor cantidad de pixeles en la que se verá esa resolución.
max-width:Es la máxima anchura de pixeles en la que se verá esa resolucion

Código:

@media only screen and (min-width:100px) and (max-width:500px){
   body{
   background-color:red;
   }
}
@media only screen and (min-width:500px) and (max-width:1000px){
   body{
   background-color:yellow;
   }
}
@media only screen and (min-width:1000px) and (max-width:2000px){
   body{
   background-color:green;
   }
}


Si os vais a poner a trabajar con este código recomiendo saber un poco antes de css.

Saludos!
Mensaje03-12-2012, 23:22 (UTC)    
Título del mensaje:

Código:
@media only screen and (min-width:100px) and (max-width:500px){
   body{
   background-color:red;
   }
}
@media only screen and (min-width:500px) and (max-width:1000px){
   body{
   background-color:yellow;
   }
}
@media only screen and (min-width:1000px) and (max-width:2000px){
   body{
   background-color:green;
   }
}   



que es lo que hace exactamente?, porque hay 3 body definididos?, como funciona? algo de explicacion seria lindo no?...

esta linea
Código:
@media only screen and (min-width:1000px) and (max-width:2000px)

se agrega a todos los contenedores definidos, o solo a body? ._.
______________
Mensaje04-12-2012, 03:00 (UTC)    
Título del mensaje: Re: [Aporte] - Tutorial medio - Web flexible o responsive de

porta-1 escribió:
que es lo que hace exactamente?, porque hay 3 body definididos?, como funciona? algo de explicacion seria lindo no?...

esta linea
Código:
@media only screen and (min-width:1000px) and (max-width:2000px)

se agrega a todos los contenedores definidos, o solo a body? ._.


lo que hace exactamente es mostrar el contenido de acuerdo al tamaño del navegador por ejemplo el que usted marco dice @media only screen and (min-width:1000px) and (max-width:2000px) significa que la pantalla si tiene un tamaño minimo de 1000px hasta 2000px mostrara el css indicado. Si es un diseño para mobiles yo recomiendo agregar handheld si es un diseño para movil

ejemplo
Código:
@handheld, media only screen and (min-width:350px) and (max-width:640px)


por ejemplo asi se ve mi sitio en un navegador normal
http://i.imgur.com/a3cO3.jpg
y asi en un telefono con opera mobile
http://i.imgur.com/aj71Q.jpg

el navegador debe ser compatible con media queries si no este tipo de codigos no funciona
______________


Ultima edición por darknet13 el Lun Dic 03, 2012 11:18 pm; editado 2 veces
Mensaje04-12-2012, 08:24 (UTC)    
Título del mensaje:

Claro, gracias por aclararlo:) Aqui el diseño es muy cutre pero si te lo curras puedes hacer una buena utilizacion del código y como en otros casos he dicho soy muy malo explicando xd


Ultima edición por cursopwg el Mar Dic 04, 2012 4:26 am; editado 1 vez
Mensaje05-12-2012, 00:05 (UTC)    
Título del mensaje:

cursopwg escribió:
Claro, gracias por aclararlo:) Aqui el diseño es muy cutre pero si te lo curras puedes hacer una buena utilizacion del código y como en otros casos he dicho soy muy malo explicando xd


todo bien, entiendo darknet... si sos muy malo explicando, con que motivo haces tutoriales ? para que no se entiendan :B?
______________
Mensaje08-12-2012, 00:58 (UTC)    
Título del mensaje:

Hola ...
Estaría genial que publiques algunas IMÁGENES en tus Tutoriales aportes que hagas , porque uno que no sabe , no tiene idea lo que esta asiendo
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group