jQuery UI 主题太大答案

【问题标题】：jQuery UI Theme too bigjQuery UI 主题太大
【发布时间】：2011-09-01 21:35:17
【问题描述】：

当我下载一个 jQuery-ui 主题时，我必须添加什么才能使默认值看起来与 jQuery-ui 演示页面中的相同？

我看到的开箱即用对话框非常大（见下文）。我知道演示页面中的所有 CSS 都可供我使用，但我并不是真正的 CSS 专家，也不知道该拿什么，该放弃什么。

编辑

这是一个 jsFiddle link 显示相同的内容。

编辑

【问题讨论】：

我认为你需要主题滚轮...你有looked here吗？
你有自己的CSS集吗？
@Joseph，我正在使用来自主题滚轮的预装 Redmond 主题。我已经尝试过它给我的东西，以及相同的谷歌共享版本。两者都会导致这个臃肿的对话框 ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/…" />
@8vius - 我尝试删除页面上其他任何地方的所有其他 css - 没有变化。
我们可以看演示或jsfiddle.net吗？

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

最好的办法是：改变基础jQuery-ui字体大小：

.ui-widget{font-size:12px;}

有关示例，请参阅 this fiddle。

【讨论】：

这应该是标记的答案，因为它只影响 JQuery UI 元素，而不像标记的解决方案那样影响正文中的所有元素。
别忘了添加!important 属性。 .ui-widget{font-size:12px !important;}
-1：仅更改 .ui-widget 是不够的。检查 jquery-ui.css 文件中的 font-size 设置 - 有很多使用 em 的各种倍数。你必须改变所有这些以获得一致的东西。最好在封闭容器中设置单个 font-size，例如 <div>。

【解决方案2】：

我明白了问题所在：P

body{font-size:10px;}

大小与页面相关（更多的是流畅的布局）。因此（至少在小提琴中）更改正文的字体大小可以修复它。只需更改页面的字体大小，对话框就会随之更改。

http://jsfiddle.net/hnBmC/

【讨论】：

谢谢！我通常不问后续问题，但我认为这是相关的：如何在其他地方恢复到浏览器的默认字体大小？现在我将这个类 .defaultText { font-size: 14px; } 应用到包含我大部分内容的 div 上。有什么我可以代替 font-size: 14px 的东西来将文本恢复到原本的样子吗？
以medium为值可以获取用户的默认字体大小。 See here。因此你会使用font-size: medium;

【解决方案3】：

对于此对话框标题问题，您只需将以下属性添加到对话框的父类

.ui-dialog { clear: both; }

供参考， jQuery UI Dialog Titlebar too tall

【讨论】：

更改文档流不会影响文本大小 - 您需要更改字体大小。

【解决方案4】：

如果你用你最喜欢的网页检查器查看 themeroller.css，你会发现：-

#themeroller {
    font-size: 10px;
}
#themeroller button,
#themeroller input,
#themeroller select,
#themeroller textarea {
    font-size: 12px;
}

在 HTML 中稍作挖掘发现<div id="themeroller"> 包含页面的整个“演示”区域，因此所有 jquery-ui 小部件都在其中，因此它们的字体大小相对于这些值。

查看我的“太大”页面，普通文本的字体大小为 18 像素。这来自主题/ui-darkness/jquery-ui.css 中的 .ui-widget，它具有 font-size: 1em，它是根据我的浏览器的基本字体大小 16 像素计算得出的。我通过检查一个简单的文档发现了这个基本尺寸：

<html><body>
<span style="font-size: 100%">here is some plain body text</span
</body></html>

因此，如何为 jquery-ui 小部件设置字体大小的问题的答案是为封闭元素设置字体大小。 <body>（由Joseph Marikle 推荐）保证能击中所有内容，但可能对您的需要来说太宽了，在这种情况下，您应该使用内部<div>。 <span> 可能是邪恶的，因为您不应该将块级的东西包装在非块中 - 但请与 CSS 样式警察检查该断言，我只是一个黑客！

我要吐槽为什么设计师选择将高度基于em，这是一个宽度，而不是ex，这是一个高度 .但是，我怀疑答案是em 在更广泛的字体范围内为您提供更一致的结果，因为大多数时候“l”的高度与“m”的宽度大致相同。相反，如果您使用2ex 作为您的基本度量，那么与“x”的高度相比，您会在具有非常短或非常长的上升和下降的字体中得到奇怪的高度。

【讨论】：

【解决方案5】：

jquery ui 是一个框架，您可以通过创建新的或现有的主题来修改它：

/*css which made title too large, reduce padding as you need*/
.ui-dialog .ui-dialog-titlebar {
    padding: 0.5em 1em 0.3em;
    position: relative;
}

【讨论】：

这不是填充...这是 .ui-widget 的字体大小

【解决方案6】：

您可以使用此 css 规则来应用较小的字体大小：

.ui-dialog{font-size: 62.5%;}

【讨论】：

影响字体大小的类比 .ui-dialog 多 - 在 jquery-ui.css 文件中查找 font-size 以找到它们。