Salida: http://thinkvitamin.com/CSS: Ocultar una columna cuando la anchura disminuye
a medida que disminuye el tamaño del navegador, en algún momento la columna de la derecha simplemente desaparece. Bastante agradable degradación, y esto lo convierte en un diseño bastante flexible. No obstante, no veo ningún CSS especial. ¿Es este Javascript, o se puede lograr de alguna manera con CSS solamente?
Esto se hace con CSS puro, en concreto con las consultas de medios de CSS3.
La especificación: http://www.w3.org/TR/css3-mediaqueries/
Un tutorial: http://webdesignerwall.com/tutorials/css3-media-queries
apoyo del navegador: http://caniuse.com/css-mediaqueries (funciona "en todas partes", excepto IE8 e inferior)
La razón de que las secciones de la derecha desaparecen es porque tienen esto en su css:
width: 24%;
float: right;
si el ancho habría sido ajustado a un ancho fijo secciones habrían caído a la parte inferior de la artículo.
no veo por qué esto desaparecería ...? Sería infinitamente pequeño a medida que el tamaño disminuye, diría yo. Me gusta: http://jsfiddle.net/mWYBX/ – user852091
Algunos enlaces similares se pueden encontrar en http://css-tricks.com/ - Chris Coiyer ha escrito un par de excelentes artículos sobre el tema: http: // css- tricks.com/6731-css-media-queries/, http://css-tricks.com/6206-resolution-specific-stylesheets/ – Nightfirecat