Comunidad de diseño web y desarrollo en internet online

Antes de los media-queries usa: max-width.

Citar            
MensajeEscrito el 29 May 2014 07:59 pm
Saludos, he sido usuario de Cristalab desde 2008, me siento muy emocionado, pues este es mi primer tutorial. :lol:

Hace algún tiempo me introduje en la técnica actual del Responsive Design, y casualmente descubrí algo interesante, sin embargo nunca he visto que nadie lo comente, postee o publique.
Imagino que muchos lo utilizan, sin embargo piensan que todo el mundo ya lo debe de saber y no lo publican, hoy doy paso a aquellas personas que ya sea van dando sus primeros pasos en diseño web o aquellas que simplemente, nunca habían visto este sencillo tip.

Sin más preámbulos comenzemos:

Wikipedia escribió:


Responsive Design
El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una filosofía de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.


Antes de los media-queries



Antes de decir. "Listo! mi sitio ya está, ahora comenzaré a usar media-queries" estas sencillas líneas te facilitarán la vida y te permirán usar solo los media-queries, para ajustar los pequeños detalles

Código CSS :

body {
display:block;
margin:0 auto;
width:980px;
/*
Seguramente usas un ancho específico para tu sitio 
pero si agregas:
*/
max-width:100%;
}

Al pasar este límite, el sitio se ajustará según a la ventana sin usar media queries.
*/

/* También aplica para imágenes: */
img {max-width:100%}
/* Siempre y cuando no uses ancho en porcentajes, sino en pixeles, cuando se llegue al ancho de la imagen, esta se empezará a escalar automáticamente. */


Espero que les sirva. A quienes no lo conocían ya. Y a los usuarios expertos, les pido que no se olviden de los que recién comienzan, todos pasamos por ahí, y hay que dejarles las mejores herramientas.
:wink:

Saludos a Todos

Por nestorpaul91

2 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 30 Jul 2014 07:50 pm
Felicitaciones por tu primer tutorial, Nestor,

Sólo te faltó un ejemplo de uso y un par de screenshots. Por ahora lo mandaré a Aportes, pero se nota que tienes talento. Vuelvelo a intentar con un poco más de detalle y seguro verás la portada con tu nombre,

Animo! :D

Por Freddie

BOFH

53 tutoriales
597 articulos
43 ejemplos

Genero:Masculino   Admin

Conserje de Cristalab

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.