Responsive web design

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

(a) <link rel="stylesheet" media="screen and (max-width: 480px)" href="extra.css" />
(b) @import url(extra.css) screen and (max-width: 480px);
(c) @media screen and (max-width: 480px) { ... }

/* Dispositivos especialmente pequeños (phones, menores que 768px) */
/* Estilos principales, ya que es el contexto por defecto en Bootstrap */
@media (min-width: 768px) {
/* Dispositivos pequeños (tablets, 768px y superiores) */
}
@media (min-width: 992px) {
/* Dispositivos medios (escritorio, 992px y superiores) */
}
@media (min-width: 1200px) {
/* Dispositivos grandes (escritorios grandes, 1200px y superiores) */
}
}

[...]
<meta name="viewport" content="width=device-width, initial-scale=1">
[...]
<div id="destacados">
        <article>
                <h2>Primer destacado</h2>
                <p>Lorem ipsum dolor sit amet... veniam quis.</p>
                <p><a href="#">Más información</a></p>
        </article>
        <article>
                <h2>Segundo destacado</h2>
                <p>Lorem ipsum dolor sit amet... veniam quis.</p>
                <p><a href="#">Más información</a></p>3
        </article>
        <article>
                <h2>Tercer destacado</h2>
                <p>Lorem ipsum dolor sit amet... veniam quis.</p>
                <p><a href="#">Más información</a></p>
        </article>
        <br class="clear"/>
</div>
[...]

* {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
}
[...]
article {
        padding: 20px;
}
@media (min-width: 481px) {

        #destacados > article {

                float: left;
                width: 50%;
        }
}
@media (min-width: 768px) {

        #destacados > article {
                width: 33%;
        }
}

• Renderizado óptimo en pantallas con diferentes densidades de píxel.

• Facilidad para cambiar sus propiedades, aplicando CSS convencional como a cualquier texto (color, efectos, etc.).

• Correspondencia en tamaños con textos colindantes.

• Sencillez de uso y de mantenimiento.

• Optimización de peticiones HTTP al funcionar al estilo de una spritesheet.

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

• Peso / consumo de ancho de banda, ya que en muchos escenarios se descarga una imagen mayor a la estrictamente requerida.

• En ocasiones no se desea solamente un reescalado, sino cambiar la porción de la imagen mostrada (técnica denominada «art-direction»).

• rwd.images.js (con fallback a noscript y soporte para art-direction)

• hisrc (plugin de jQuery)

• foresight.js

.div-container {
        position: relative;
        padding-bottom: 75%;
        height: 0;
        overflow: hidden;
}

.div-container > iframe {
        position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
}

.youtube-container {
        position: relative;
       padding-top: 35px;
        padding-bottom: 75%;
        height: 0;
        overflow: hidden;
}

#my-iframe { max-width: 100%; }

[...]
.overflow-container {
overflow-y: scroll;
}

[...]

<div class="overflow-container">

 <table>
   <!-table contents ->
</table>
</div> 

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

[...]#my-canvas {

width: 100%;
height: auto;
}
[...]
<canvas id="my-canvas" width="800" height="600" />

• Ink (de los creadores del framework Foundation)

• Zurb responsive email templates

• Plantillas de la conocida herramienta de email marketing: MailChimp

• Antwort [75]