¿Empezando con el responsive? ¿Te duele la cabeza de tanto golpearla contra la pared? ¿Una imagen te ha roto la maquetación? ¿Un vídeo se ha cruzado de brazos y no le da la gana de redimensionarse? ¿Internet Explorer se ríe de ti señalándote con el dedo…?

Aquí tienes algunas píldoras que pueden paliar esos dolores de cabeza y esperemos que no te vengan otros nuevos…

1. META DE ESCALA

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Con esta etiqueta, que debemos añadir al head, conseguimos por un lado que nuestra página adquiera el mismo ancho que la pantalla que el dispositivo desde el que accedemos (width=device-width) y que el zoom inicial sea 0 (initial-scale=1.0). Esta meta es prácticamente obligatoria si nuestro sitio es responsive.

2. SELECTIVIZR

Gracias a esta librería JavaScript podremos aplicar las pseudo-clases y atributos de CSS3 en Internet Explorer, desde la versión 6 de este navegador hasta la 8. Aunque Selectivizr se usa en combinación de las librerías JavaScript más conocidas, utilizándolo junto con Mootols soportaremos el 100% de los selectores.

http://selectivizr.com/

3. CAMBIANDO EL MODELO DE CAJA

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Añadiendo esta sintasix al comienzo de nuestros css conseguiremos que el cálculo del ancho de un elemento en pantalla sea común para todos los navegadores. Mediante el valor border-box, forzamos que el padding y border se incluyan en el tamaño del elemento. De esta manera el ancho especificado siempre será el ancho total, no teniendo que sumarle el borde ni el padding.

Por defecto: ancho total = width + padding + borde;
Con box-sizing: ancho total = width

Fuente: http://css-tricks.com/box-sizing/

4. IMAGEN AL 100% DE SU CONTENEDOR

img {
max-width: 100%;
height: auto;
}

Gracias a esta sencilla regla de css aplicada a todas las imágenes, haremos que estas se adapten como máximo al 100% de su contenedor. De esta manera si el contenedor fluye con el tamaño del dispositivo, nuestras imágenes siempre se verán limitadas como máximo al ancho del mismo.

5. IFRAMES, OBJECT Y EMBED ADAPTADOS AL 100%

.iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin: 15px 0;
 }
.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Parecido a lo visto anteriormente con las imágenes, pero en esta ocasión cualquier código embebido que insertemos dentro de un elemento con clase iframe-container, se adaptará al 100% de su contenedor principal. Para ello, después de incluir los css, debemos introducir el siguiente HTML:

<div class="iframe-container">Inserta aquí el embebido</div>

Fuente: http://webdesignerwall.com/tutorials/css-elastic-videos