在Firefox响应式设计视图中自定义背景

Question

有没有办法在Firefox中定制屏幕背景＆＃34;响应式设计视图＆＃34;？ 我想插入一个图像（例如一个空白的iphone模板）并使用屏幕录制软件来模拟移动演示。 据我所知，无论是通过CSS还是其他插件都无法改变背景。

我查看了Firefox OS模拟器，但它并不能满足我的需求（而且你不能使用像firebug或Agent Spoofer这样的插件）。

Answer 1

在不知道你尝试过什么的情况下，我们必须猜测你需要回答这个问题。你只需要知道选择器是什么吗？您是否需要了解如何应用CSS？您是否尝试制作可进行此类修改的插件？

如果没有更多信息，这里有一些关于CSS的一般信息：

自适应模式采用chrome://browser/content/browser.css和chrome://browser/skin/browser.css中的CSS设置样式。这两个文件都位于 omni.ja （浏览器目录中的文件扩展名已更改为.ja的zip存档文件）中。在该档案中，上述文件是 chrome / browser / content / browser / browser.css ， chrome / browser / skin / classic / browser / browser.css 和铬/浏览器/皮肤/经典/航空/浏览器/ browser.css

背景显示为<vbox>，class="browserContainer"的属性为responsivemode="true"。

从Firefox 36.0.4开始，相关的CSS是（来自chrome://browser/skin/browser.css）：

.browserContainer[responsivemode] {
  background-color: #222;
  padding: 0 20px 20px 20px;
}

您可以通过多种方式对此进行更改。一种方法是提取 omni.ja 文件的内容，修改相应的 browser.css 文件，然后将所有文件放回名为 omni.ja 并将该存档放在浏览器目录中以代替原始文件。另一种方法是创建一个覆盖 chrome：//browser/skin/browser.css 文件的加载项（这可以使用加载项中的override指令来完成chrome.manifest文件。另一种方法是加载项以多种不同方式之一直接应用新样式。

但是，最简单的方法是使用您想要使用的CSS创建 [profile directtory] ​​/chrome/userChrome.css 文件（您可能需要创建 chrome <您的个人资料目录中的/ em>目录）。例如，以下内容将为响应式设计视图生成红色背景：

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */
/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */
/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
/* Set default namespace to XUL */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


.browserContainer[responsivemode],
vbox[anonid=browserContainer][responsivemode]{
    background-color:red !important;
}