jQuery:检查窗口是否小于像素以外的x单位(例如em,rem)?

时间:2018-03-19 12:45:47

标签: javascript jquery css sass media-queries

听起来微不足道但我怎么能真正检查这个?我在SASS中有以下断点:

$width_breakpoints: (
        small: 39.9375em,
        medium: 40em,
        large: 76em
);

现在我要查看以下内容(伪代码):

if($(window).width() < 39.9375em) {
    // add current-mode-mobile class to a certain element
}

如何实际检查宽度是否小于X em或X rem或X%?

2 个答案:

答案 0 :(得分:2)

对于IE10 +:

if (window.matchMedia("(min-width: 39.9375em)").matches) {
  /* the viewport is at least 39.9375 em wide */
} else {
  /* the viewport is less than 39.9375 em wide */
}

答案 1 :(得分:1)

这是一个甚至不需要jQuery的解决方案。

var widthInEm =  window.innerWidth /
          parseFloat(getComputedStyle(document.querySelector('body'))['font-size'])

if(widthInEm < 39.9375) {
   // add current-mode-mobile class to a certain element
}