media queries responsive css

Media query es una tecnología css introducida en css3 que, utiliza la regla @media para introducir un bloque de propiedades de css sólo si una determinada condición es verdadera.

Podemos añadir un punto de interrupción en ciertas partes del diseño se comportan de manera diferente en cada lado del punto de interrupción.

Se recomienda utilizar un punto de interrupción con el primer móvil, eso hará que la visualización de la página más rápido en los dispositivos más pequeños

El primer móvil significa diseñar para móviles antes de diseñar para el escritorio o cualquier otro dispositivo. En lugar de cambiar estilos cuando el ancho de 768px se hace más pequeño, hay que cambiar el diseño cuando el ancho de 768px se hace más grande.

Puede añadir tantos puntos de ruptura como desee. Como insertar un punto de ruptura entre las tabletas y los teléfonos móviles mediante la adición de una mayor consulta de medios de 600px, y un conjunto de nuevas clases de dispositivos de más de 600px, pero más pequeño que 768px.

Las consultas de medios también se pueden utilizar para cambiar el diseño de una página dependiendo de la orientación del navegador. Puede tener un conjunto de propiedades de CSS que sólo se aplica cuando la ventana del navegador es más ancho que su altura, lo que se denomina orientación "horizontal".

Un ejemplo:

css

/* For mobile phones: */

[class*="col-"] {

width: 100%;

}

@media only screen and (min-width: 600px) and (max-width: 768px) {

/* For tablets: */

.col-m-1 {width: 8.33%;}

.col-m-2 {width: 16.66%;}

.col-m-3 {width: 25%;}

.col-m-4 {width: 33.33%;}

.col-m-5 {width: 41.66%;}

.col-m-6 {width: 50%;}

.col-m-7 {width: 58.33%;}

.col-m-8 {width: 66.66%;}

.col-m-9 {width: 75%;}

.col-m-10 {width: 83.33%;}

.col-m-11 {width: 91.66%;}

.col-m-12 {width: 100%;}

}

@media only screen and (min-width: 768px) {

/* For desktop: */

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

}

html

<div class="row">

<div class="col-3 col-m-3">...</div>

<div class="col-6 col-m-9">...</div>

<div class="col-3 col-m-12">...</div>

</div>

Cuando se usa para trabajar con el tamaño de las imagenes, se recomienda el uso del ancho máximo al 100%, esto permite que la foto se haga más pequeña, pero no más grande que su tamaño original. 

ejemplo css:

img {

width: 100%;

height: auto;

}

Para más información aquí