Question

我有html页面加载不同的css，具体取决于屏幕宽度（针对个人电脑，平板电脑和手机）：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1200px)" href="css/desktop-style.css" > 
<link rel="stylesheet" type="text/css" media="screen and (min-width: 769px) and (max-width: 1199px)" href="css/tablet-style.css" >
<link rel="stylesheet" type="text/css" media="screen and (min-width: 100px) and (max-width: 768px)" href="css/phone-style.css" >

我非常依赖jQuery，应该根据活动的css选择函数。 jQuery的JavaScript中有没有办法确定哪个css是活动的？ 或者我应该使用jQuery来确定浏览器宽度，并根据宽度输出进一步的功能？谢谢。

Answer 1

您可以检查this线程是否有帮助。

您还可以考虑在css文件中使用媒体查询，并为不同的屏幕变体加载相同的文件。

Answer 2

我建议您使用media query，但如果您需要JavaScript解决方案，可以使用jQuery执行此操作：

var window = $(window).width();
var css = $('#css');

if(window > 100 && window < 768){
  css.attr('href','css/desktop-style.css')
} else if(window > 769 && window < 1199){
  css.attr('href','css/tablet-style.css')
} else if(window > 1200){
  css.attr('href','css/phone-style.css')
}

<link id="css" rel="stylesheet" type="text/css" href="css/style.css" >

注意：您可以根据需要更改分辨率，我不确定它对于检测mobile tablet等是否正确。

警告： 请注意！此方法对于SEO内容有点不好，谷歌等不会读取您的响应式样式。

Answer 3

检查设备的widh可能更明智。但我认为你可以通过这个小小的“黑客”找出使用的css。在每个css中，你给一个隐藏元素一个无意义的属性。

在示例中，我给了#canary动画名称first-css。

在另一个css文件中，您可以编写

#canary {animation-name: second-css; display: none}

您可以为每个css文件中的某个元素指定唯一属性。 JQuery可以检查该属性。

$(function() {
whichcss=$("#canary").css("animation-name");
$("#output").text(whichcss);
})

#canary {animation-name: first-css; display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="canary"></p>
<p id="output"></p>

要清楚。在您的css文件中，您应该以这种方式包含css文件的名称：

在desktop-style.css中：

#canary {animation-name: desktop-css; display: none}

in tablet-style.css：

#canary {animation-name: tablet-css; display: none}

在phone-style.css中：

#canary {animation-name: phone-css; display: none}

确定哪个css加载了jQuery

3 个答案: