Diseño adaptativo, basta con solo trasladar los px a % o em?

[educhip]

El diseño web adaptativo como sabes consiste en que el documento se adaptará al tamaño del puerto de visualización (pantalla en este caso), digo esto porque muchos desarrolladores novatos confunden tamaño de pantalla con puerto de visualización, y no es lo mismo.

Para ello como te dicen tienes que hacer uso de los media-querys en css, definiendo tres, para móvil, tablet y pc.

Si lo haces pasando los pixeles a em, sólo conseguiras que se adapten los divs, pero las imágenes y demás elementos permanecerán a su tamaño original. Para que las imágenes funcionen en responsive es necesario incluir un archivo que dreamweaver introduce llamado respond.js.

Una vez tengas esto hecho podrás ir definiendo cada elemento en la hoja de estilos css, es como si tuvieras tres hojas en una, para los distintos tamaños de pantalla.

Es un proceso que requiere experiencia hasta obtener los resultados deseados. Empieza por ejemplos sencillos con divs solamente y vas ampliando incluyendo texto (en tamaños em), e imágenes, verás que en algunos casos debes hacer uso de los atributos max-with, min-with, etc...

Saludos y ánimo.