Como aplicar Responsive Design

difilippocarlos · #1 (**permalink**) 19/07/2013, 05:05

Hola a todos,

Soy nuevo en el tema "WEB" el año pasado hice un curso de diseño web y otro de programación web con php, para realizar la pagina de la empresa donde trabajo.
Pronto me enviaran a hacer uno de flash, para crear los menu y banners, asi dejarla un poco mas vistosa.

Ahora estoy teniendo un problema con unos banners que me hicieron agregar, y no puedo adaptarlos a las pantallas chicas...

Me gustaria de alguna forma obtener el tamaño de la pantalla y segun eso devolver si aparecen los 2 banners, solo 1 , o ninguno.

En otro tema que publique me pasaron esta web
http://stuffandnonsense.co.uk/

La verdad seria mas o menos eso lo q necesito, que al cambiar el tamaño de la ventana vallan desapareciendo los banners.

mi web: www.coop5.com.ar

Saludos

pzin · #2 (**permalink**) 19/07/2013, 05:37

Tendrás que usar media-queries.

Básicamente indicas qué estilos dar según el ancho de la pantalla —o alto si necesitas. Sería algo como esto:

Código CSS:

Ver original@media screen and (max-width: 320px) {
  .publicidad {
    display: none;
  }
}

antigoo · #3 (**permalink**) 19/07/2013, 11:57

tengo duda las media-queries con compatibles con todos los navegadores y versiones?

pzin · #4 (**permalink**) 19/07/2013, 12:19

Con todos los navegadores si, con todas las versiones obviamente no, en Netscape no funcionan.

Puedes ver la compatibilidad aquí: http://caniuse.com/css-mediaqueries

antigoo · #5 (**permalink**) 19/07/2013, 13:24

Diablos ese Iexplorer siempre anda con esas cosas.