有什么办法可以在某些条件下禁用媒体查询吗？

Question

我对主站点使用相同的样式表以及站点的“预览”（不在iframe中，因为我需要它是交互式的）。问题是，预览不占用屏幕宽度的100％，因此当媒体查询基于屏幕大小时，页面行为奇怪。我可以将编辑器/预览模式设置为固定宽度，所以我想也许有一些方法可以在某些条件下禁用媒体查询？不过，我不知道如何处理这个问题。要么通过javascript，要么在媒体查询之后加载一个额外的通用样式表，以便以某种方式重置事物。

否则我可能需要制作备用样式表，这对于维护或重新设计页面来说是一种痛苦，因此预览区域是宽度的100％。

Answer 1

你有很多选择。

• 首先，您可以停用“违规”样式表： 使用<link id="mediaSheet" rel="stylesheet" href="....">，您可以在onload处理程序中运行此代码：document.getElementById("mediaSheet").sheet.disabled = true;。
• 如果您想编码，可以有条件地将此链接添加到最终的HTML中。例如。如果使用GET参数?preview=true请求页面，则不会生成样式表元素。

Answer 2

将视口元设置为符合媒体查询的特定宽度。

确保您已正确设置比例。如果您希望移动设备能够看到桌面版本，我倾向于删除它。

Answer 3

想加入A.Pavlov的回答（我还不能添加评论）：

如果你想使用JQuery

$('#mediaSheet')[0].sheet.disabled = true

或者如果要禁用所有媒体查询，请使用class =＆＃34; mediaSheet＆＃34;而不是ID：

$('.mediaSheet').each(function(){
    $(this)[0].sheet.disabled = true;
});