Question

我有一个网站，我尝试使用移动版本构建，使用CSS媒体查询以便在HTML中建立两个：

<link id="fullcss" title="desktop version" rel='stylesheet' type='text/css' media="only screen and (min-device-width:481px)" href='desktopstyle.css' />

<link id="mobicss" title="mobile version" rel='alternate stylesheet' type='text/css'  media="only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (max-device-width: 480px)" href='mobistyle.css' />

移动媒体查询只是如此之大，因为我已将所有高分辨率手机与典型的iPhone一起拍摄过。

在我的身体里，我有两个链接：

<a id="css-full" href="#desktop">Desktop View</a>
<a id="css-mobi" href="#mobile">Mobile View</a>

我想显示/隐藏哪个取决于当前工作表（它在CSS中）。

我试图为用户提供在移动设备上切换到桌面样式表的选项，反之亦然，使用jQuery或Javascript。目前，它看起来像这样：

jQuery(document).ready(function($){
/* CSS switch */
$("#css-full").click(function(){
    $("#fullcss").attr(href, "desktopstyle.css");
    $("#mobicss").attr(href, "desktopstyle.css");
});
$("#css-mobi").click(function(){
    $("#mobicss").attr(href, "mobistyle.css");
    $("#fullcss").attr(href, "mobistyle.css");
});
});

我对jQuery不是很熟悉，所以很明显这对我来说并不适合。解决这个问题的最佳方法是什么？不幸的是，我不能使用PHP。

谢谢！

Answer 1

尝试在代码中引用'href'属性

$("#fullcss").attr('href', "desktopstyle.css");
$("#mobicss").attr('href', "desktopstyle.css");

jQuery CSS切换与媒体查询默认值

1 个答案: