Ouput todas las consultas de medios de la página en una lista

Usando JavaScript, ¿cuál sería la mejor manera de generar una lista que contenga todas las consultas de medios que se están aplicando a la página actual.Ouput todas las consultas de medios de la página en una lista

Asumo que esto tendría que filtrar para encontrar preguntas de los medios integrados, es decir,

<link rel="stylesheet" media="only screen and (min-width: 30em)" href="/css/30em.css">

, así como preguntas de los medios ubicados en los archivos CSS, es decir

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

un ejemplo de salida Lo que estoy buscando:

<p>There are 3 media queries loaded on this page</p> 
<ol> 
    <li>30em</li> 
    <li>40em</li> 
    <li>960px</li> 
</ol>

Fuente

2012-09-16 AlecRust

Comprobar ejemplo here con el código para enumerar las preguntas de los medios que se están aplicando a la página actual

JavaScript:

var mediaQueryCount = 0; 

$(document).ready(function(){ 
    $links = $('link[rel="stylesheet"]'); 
    $.each($links, function(i, item){ 
     if(item.media){ 
      mediaQueryCount++; 
      var start = item.media.indexOf('(')+1; 
      var end = item.media.indexOf(')'); 
      var str = item.media.substring(start, end); 
      var listItem = $('<li />',{ 
       html: str.split(':')[1] 
      }).appendTo("#result"); 
     } 
    }); 
    $('#totalMedia').text(mediaQueryCount); 
});

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" media="only screen and (min-width: 30em)" /> 
     <link rel="stylesheet" media="only screen and (min-width: 40em)"/> 
     <link rel="stylesheet" media="only screen and (min-width: 960px)"/> 
    </head> 
    <body> 
     <p>There are <span id="totalMedia"></span> media queries loaded on this page</p> 
     <ol id="result"> 
     </ol> 
    </body> 
</html>

Fuente

2012-09-24 12:07:14 sureshunivers

Puede utilizar MediaQueryList objeto:

objeto A MediaQueryList mantiene una lista de preguntas de los medios en un documento, y se ocupa de enviar notificaciones a los oyentes cuando las preguntas de los medios sobre el cambio documento.

Un artículo relacionado por Nicholas C. Zakas:

http://www.nczonline.net/blog/2012/01/03/css-media-queries-in-javascript-part-1/

Otra opción es usar styleSheets propiedad del objeto document.

var $ol = $('<ol/>'); 

var styleSheet = document.styleSheets; 
$.each(styleSheet, function(i, styleObject) { 
    $.each(styleObject.cssRules, function(i, rule){ 
     if (rule.media) { 
      $ol.append(rule.media[0]) // only screen and (min-width: 481px) and (max-width: 768px) 
     } 
    }) 
}) 
var len = $ol.find('li').length; 
$('p').text('There are ' + len + ' media queries loaded on this page') 
$('body').append($ol)

Fuente

2012-09-16 21:36:28 undefined

Gracias! Un ejemplo de Fiddle sería genial. – AlecRust

Just fyi http://caniuse.com/#search=MediaQueryList y también un 'polyfill matchMedia()' que puede serle útil: https://github.com/paulirish/matchMedia.js/blob/master/matchMedia.js –

Por favor, pago y envío esto link. Usé el código @sureshunivers para analizar y crear una lista de li.

var sheets = document.styleSheets; //contains an object of all loaded stylesheets 
var rules = sheets[i].cssRules; //The rules variable is list of all the rules of the current stylesheet represented as CSSRule objects.

Pedido presente artículo- Reacting to media queries in javascript

Fuente

2012-09-27 08:42:50 thomasbabuj

Ouput todas las consultas de medios de la página en una lista

Respuesta

Cuestiones relacionadas