css - 如何手动覆盖 CSS @media 查询？

Question

我为客户使用以下方法为网站制作了移动优化样式表:

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

这工作正常，但他们请求了一个链接，该链接将以其原始的完整页面格式显示该网站。

有谁知道重新加载网站并覆盖上面的媒体查询的方法吗？是使用 JavaScript 执行此操作的唯一方法吗？

Answer 1

就我个人而言，我更喜欢一种解决方案，即通过用户选择触发的页面后台代码中的某些逻辑有条件地呈现样式表链接。它不是那么干净，但是您也可以通过使用一些 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，并记住它以备将来访问。