javascript - polyfill - respond js cdn

css3-mediaqueries.js VS respond.js

Question

css3-mediaqueries.js o css3-mediaqueries.js ?

La documentación oficial, especialmente la de css3-mediaqueries.js, es escasa. Leyendo en SO, foros y blogs , he resumido estas ventajas y desventajas.

responder.js

Pros:

1. Más confiable (? Recomendado por Modernizr , Twitter Bootstrap 3 y H5BP )
2. Más ligero (4kb) y más rápido
3. Interpretar mediaquery en cualquier contexto ( <link> , CSS en línea, @ import-ed CSS)

Contras:

1. No se actualiza en el tamaño de la ventana
2. Soporta solo min-width max-width
3. No soporta unidades em (¡gran punto débil!)

css3-mediaqueries.js

Pros:

1. Reacciona en tiempo real (¡al redimensionar también!)
2. Soporta unidades em (¿en serio? ¿Alguien lo probó?)

Contras:

1. Más pesado (15kb) y más lento
2. Interpretar solo CSS en línea con un tipo de medio explícitamente declarado
3. Carece de documentación detallada y el proyecto parece abandonado.

¿Alguien tiene puntos para agregar a la lista, o experiencias personales para compartir, o una preferencia particular por uno u otro script? Si es así, ¿por qué?

Answer 1

El punto es probablemente discutible ahora. He desarrollado un marco de JavaScript puro que genera y administra consultas de medios. Funciona con todos los navegadores y sistemas operativos. Su huella tiene menos de 500 caracteres. Puedes verlo trabajando aquí: ieee-ac.org.

Answer 2

He creado una página de prueba, incluyendo Mediatizr también.

Si alguien está interesado, aquí está la página de prueba , y estos son los results (probados en IE8 e IE7).

css3-mediaqueries.js

Pros

1. Soporta mediaqueries min , max y min+max
2. Soporta valores px y em
3. Reacciona al cambiar el tamaño de la ventana.
4. Elabora CSS en la página ( <style> ) y hojas de estilo externas.

Contras

1. No soporta width mediaquery
2. No explica <link media="screen and ..."> ni @import ed stylesheet

responder.js

Pros

1. Soporta mediaqueries min , max y min+max
2. Soporta valores px y em
3. Reacciona al cambiar el tamaño de la ventana.
4. Elabora hojas de estilo externas solamente

Contras

1. No soporta width mediaquery
2. No elabora CSS en la página, <link media="screen and ..."> ni @import ed stylesheets
3. Puede causar un error de javascript cuando se combina con jQuery on load eventos de on load , para resolverlo, debe colocar el script al final de la página.

mediatizr.js

Simplemente ... no funciona

Al final opté por css-mediaqueries.js , cargado condicionalmente con Modernizr .