53R14L

Buenas, quería compartir como hacer un sitio responsive bien bien simple. Esto es básicamente lo que use para hacer un sitio, que estoy haciendo (http://saisiner.com), responsive tocando lo menos posible del css. La home del sitio originalmente se veía de la siguiente forma: Para hacerlo responsive, en primer lugar hay que agregar este meta tag en el header del html (entre los tags <header></header> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> Si investigan más, van a ver que tiene más parámetros para configurar. Esto hace que el navegador use el ancho de la pantalla del navegador como ancho del documento y no le aplique ningun zoom default. Después solo hay que agregar en el css del sitio: @media screen and (max-width: ANCHOENPIXELES) { CSSSELECTOR { PROPIEDADES CSS } } De esta forma se "le dice" al navegador que si el ancho del documento es menor al ANCHOENPIXELES que le setean aplique esas reglas css. De esta forma si tenemos un menu con el siguiente css: <ul class="menu"> <li><a href="opcion1.html"><span>opcion1</span></a></li> <li><a href="opcion2.html"><span>opcion2</span></a></li> </ul> ul.menu li a{ background: transparent url('urldelicono.png') no-repeat center left; padding: 5px 5px 5px 20px; } y quieren que cuando se ve en una pantalla chica no se muestre el texto pero si el icono habria que agregar el siguiente css: @media screen and (max-width: 500px) { ul.menu li a span{ display:none; } } Aplicando las reglas de esa forma logre que el sitio se vea de la siguiente forma en un celular: Esto pueden probarlo con el navegador achicando el tamaño de la pantalla o con herramientas como: http://links.germanlena.com.ar/open/tester-responsive Pueden ver como va quedando el sitio en el siguiente sitio: http://saisiner.com Esta bajo desarrollo así que es probable que tenga algún que otro error.