javascript - 使用 JS 选择外部 CSS 文件

Question

我想使用一段 JS 中的变量来选择一个 CSS 文件。我正在研究特征检测以选择特定的 CSS。这是我用来确定屏幕分辨率的代码。我想使用“RES”或“device”来选择外部 CSS。谢谢。

function hasTouch() {
  return Modernizr.touch;
}

var RES = window.screen.availWidth

function detectDevice() {
  if (hasTouch()) {
    if (RES < 600) {
      device = 'phone';
    } else {
      device = 'tablet';
    }
  } 
  if (RES > 600 && RES < 1025) {
    device = 'Medium';
  }
  if (RES > 1025 && RES < 1367) {
    device = 'Large';
  }
  if (RES > 1367) {
    device = 'XL';
  }
  return device;
}

document.querySelector('#device').innerHTML = detectDevice();

Answer 1

使用 mediaQueries，您甚至不需要 Javascript。

http://jsfiddle.net/D6hZn/3/

HTML

<div id="device"></div>

CSS

#device:before {
    content: "phone";
}

@media (min-width: 600px) {
    #device:before {
        content: "Medium";
    }

}

@media (min-width: 1025px) {
    #device:before {
        content: "Large";
    }    
}

@media (min-width: 1367px) {
    #device:before {
        content: "XL";
    }    
}

至于触摸，我希望您可以为此使用 mediaQueries，但这不可能(目前)。使用 Modernizr

CSS

html.touch #device:after {
    content: " touch";
}

html.no-touch #device:after {
    content: " no-touch";
}