有没有办法在某些条件下禁用媒体查询? [英] Is there any way to disable media queries under certain conditions?

问题描述

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

I am using the same stylesheet for the main site as well as a 'preview' of the site (NOT in an iframe because I need it to be interactive). The issues is, the preview does not take up 100% of the screen width, so when media queries are based on screen size, the page behaves oddly. I am ok with making the editor/preview mode fixed width, though, so I thought perhaps there is some way I can disable the media-queries under certain conditions? I have no idea how to approach that, though. Either through javascript, or potentially loading an additional, generic stylesheet after the mediaqueries that would somehow reset things.

否则我可能不得不制作备用样式表，这将很难维护，或者重新设计页面以使预览区域为 100% 的宽度.

Otherwise I may have to make alternate stylesheets, which would be a pain to maintain, or redesign the page so that the preview area is 100% of the width.

推荐答案

您有多种选择.

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

• First off, you can disable the "offending" stylesheet: with <link id="mediaSheet" rel="stylesheet" href="....">, you may run this in your onload handler: document.getElementById("mediaSheet").sheet.disabled = true;.
• If you feel like coding, you may add this link to your final HTML conditionally. E.g. if the page is requested with a GET parameter ?preview=true, the stylesheet element will not be generated.

这篇关于有没有办法在某些条件下禁用媒体查询?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！