如何手动覆盖CSS @media查询?

时间:2014-04-24 11:23:39

标签: css media-queries

我使用以下网址为客户制作了一个针对网站的移动优化样式表:

    <link rel="stylesheet" type="text/css" media="screen and (max-device-width : 768px)" href="css/mobile.css"  />

此工作正常,但他们已请求一个链接,该网站将以原始的整页格式显示该网站。

有没有人知道重新加载网站并覆盖上面的媒体查询的方法?使用JavaScript是唯一的方法吗?

2 个答案:

答案 0 :(得分:0)

只有在您有权访问页面呈现时才能进行链接。我认为只使用普通链接,这是不可能的。

但你可以支持alternate styles。这使得用户可以在他的浏览器中选择想要的布局。

编辑: 之后&#34; BoltClock&#34;注意到它可能缺乏移动浏览器支持,你可以无论如何都可以通过javascript选择风格。但是,#Lot;&#34; Mel Lota&#34;

接近答案

答案 1 :(得分:0)

我个人赞成一种解决方案,通过用户选择触发的页面后面的代码中的某些逻辑有条件地呈现样式表链接。它不是那么干净,但你也可以通过使用一些javascript实现这一点。也许是为了给样式表链接提供一个id:

<link id="mobilestyles" rel="stylesheet" type="text/css" media="screen and (max-device-width : 768px)" href="css/mobile.css" />

然后调用一个函数来禁用按钮事件处理程序中的样式表:

的jQuery

$("#mobilestyles").remove();

普通JS

document.mobilestyles[0].disabled = true;

然后,您可以将用户的选择存储为Cookie,并记住以供将来访问。