Using media queries from code | Document Object Model (DOM)

b_b PUBLIC DOMAIN 3/10/2012

Using media queries from code | Document Object Model (DOM) | MDN
▻https://developer.mozilla.org/en-US/docs/DOM/Using_media_queries_from_code?redirectlocale=en-US&redirectslug=C

Jouer avec les media queries depuis un script, par exemple :

var mq = window.matchMedia("(max-width: 640px)");

if (!mq.matches)

        alert('prout');

The DOM provides features that make it possible to test the results of a media query programmatically. This is done using the MediaQueryList interface and its methods and properties. Once you’ve created a MediaQueryList object, you can check the result of the query or, alternatively, receive notifications automatically when the result changes.

#css #media-queries #javascript #jquery

b_b PUBLIC DOMAIN

b_b @b_b PUBLIC DOMAIN 4/10/2012

Et comme d’habitude il faut un fix pour IE, le voici :
►https://github.com/paulirish/matchMedia.js

b_b @b_b PUBLIC DOMAIN
b_b @b_b PUBLIC DOMAIN 10/12/2015

Une fourberie pour faire la même chose à coup de css + jQuery :
Rather than the measuring the screen width on resize of the window, I check for a css rule that is changed by the media query. This way, regardless of the how the browser treats the scrollbar, the media query will fire at the same time.
▻https://www.fourfront.us/blog/jquery-window-width-and-media-queries

b_b @b_b PUBLIC DOMAIN

Écrire un commentaire