3

我使用ThemeRoller工具为 jquery mobile 创建了一个样式表。在 ThemeRoller 页面上看起来真的很棒。在我的移动应用程序中......不太好。我认为我的样式表和 jquery 样式表之间的定义一定存在一些冲突。

Rails 布局文件：

<%= stylesheet_link_tag "jquery_mob_theme.min", "jquery.mobile-1.1.0.min", "stylin.mobile" %>

对于那些不熟悉 Rails 的人，它呈现：

<link href="/stylesheets/jquery_mob_theme.min.css?1338304118" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.mobile-1.1.0.min.css?1338312435" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stylin.mobile.css?1337894014" media="screen" rel="stylesheet" type="text/css" />

解决这个问题的唯一方法是遍历数千行 css 来寻找冲突吗？是否有可以在样式表中检测到的 CSS 调试工具？我可以将 jquery 文件名更改为 scss，然后将它们滚动到一个样式表中。我熟悉 Firebug 和 Web 检查器，它们检查一页上的样式。那不会有帮助的……对吧？

谢谢。

4

3 回答 3

1

不幸的是，所有的 css 都是基于继承的，因此没有自动方式知道冲突或对象是否刚刚覆盖了父对象的样式。我认为最好的办法是强制 rails 在台式电脑上显示网站的移动版本，然后您可以使用 Google chrome 检查器。它将向您显示应用于特定对象的所有样式。它仅在样式表中显示带有行号的相关样式，因此您不会被困在 css 中。您还可以在 chrome 中对其进行编辑，以在更改样式表之前查看更改的外观。

于 2012-05-29T20:22:12.633 回答
1

Firebug（Firefox 的扩展）可以显示应用于任何给定元素的所有样式，以及哪些样式被其他样式覆盖。您必须从桌面浏览器查看您的移动网站，但这可以在 Firefox 中通过更改用户代理以匹配移动设备（iPod、Android 等）的用户代理来完成。

如果您打算在您的网站上使用 webkit，Firefox 不是一个好选择，因为它不会呈现 webkit css 样式。另一种方法是使用 Safari 及其开发工具（可以在选项菜单中激活）。

如果您需要从实际的移动设备进行调试，则选择不多。如果您可以将 Opera mobile 安装到设备上，它会附带一个不错的调试器，称为 Dragonfly。

于 2012-05-29T20:25:26.843 回答
1

您的样式表样式表的顺序对于被覆盖的内容很重要。确保您的样式表位于两个 jQuery 样式表之前。

于 2012-05-31T13:14:59.037 回答