Source: Importing CSS Breakpoints Into JavaScript
L’exemple utilise Bootstrap 3 mais est facilement transposable.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
body:before { display: none; } @media (max-width: @screen-xs-max) { body:before { content: "xs"; } } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { body:before { content: "sm"; } } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { body:before { content: "md"; } } @media (min-width: @screen-lg-min) { body:before { content: "lg"; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var breakpoint = {}; breakpoint.refreshValue = function () { this.value = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, ''); }; $(window).on('load resize', breakpoint.refreshValue()); if (breakpoint.value == 'xs') { console.log('XS breakpoint'); } if (breakpoint.value == 'sm') { console.log('SM breakpoint'); } if (breakpoint.value == 'md') { console.log('MD breakpoint'); } if (breakpoint.value == 'lg') { console.log('LG breakpoint'); } |