Question

我想使用JS中的变量选择一个CSS文件。我正在进行功能检测以选择特定的CSS。这是我用来确定屏幕分辨率的代码。我想使用＆＃34; RES＆＃34;或＆＃34;设备＆＃34;选择外部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";
}

使用JS选择外部CSS文件

1 个答案: