Css 如何使单选按钮和复选框相对于系统分辨率更改大小？

我知道有很多解决方案可以帮助更改单选按钮或复选框的大小，但我需要一种方法，在.css文件或其他内联解决方案中使用em使大小相对

我试图让我的控件在720p、1080p和4K中显示相同的大小。除了RadioButton和CheckBox之外的所有其他控件都通过使用em来控制选择器控件的大小。我将在下面为每个控件包含一些相关的代码片段

RadioButton.css（基本字体大小在另一个文件中定义）

屏幕截图

.CheckBox {
    -fx-font-size:  1em;
}

.CheckBox .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
    -fx-padding: 0.5em;
}

.CheckBox:focused .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox:hover .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox:armed .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox .mark {
    -fx-background-insets: 0.083333em 0em 0.083333em 0em, 0em;
    -fx-padding: 0.5em;
    -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
}

当所有这些都被使用时，随着分辨率从4K->1080p->720p变大，RadioButton变得越来越大 这让我觉得控件的某些部分仍在使用自己的内部硬大小。我知道通常您只是更改填充值以获得不同的大小，但是正如您所看到的，填充值已经在这里用em设置好了

Checkbox.css

.CheckBox {
    -fx-font-size:  1em;
}

.CheckBox .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
    -fx-padding: 0.5em;
}

.CheckBox:focused .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox:hover .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox:armed .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox .mark {
    -fx-background-insets: 0.083333em 0em 0.083333em 0em, 0em;
    -fx-padding: 0.5em;
    -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
}

屏幕截图

.CheckBox {
    -fx-font-size:  1em;
}

.CheckBox .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
    -fx-padding: 0.5em;
}

.CheckBox:focused .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox:hover .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox:armed .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox .mark {
    -fx-background-insets: 0.083333em 0em 0.083333em 0em, 0em;
    -fx-padding: 0.5em;
    -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
}

这与RadioButton文件非常相似，其中所有值都使用em而不是硬值。作为标记一部分的-fx形状是否会因为是硬值而导致所有em值失败

期望值

.radio-button {
    /*-fx-font-size: 1em;*/
}

.radio-button .radio  {
    -fx-background-insets: 0em;
    -fx-border-insets: 0em;
    -fx-border-radius: 1em;
    -fx-padding: 0.25em;
}

.radio-button .dot {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-padding: 0.3em;
}

---

我的最终目标是让单选按钮和复选框在不同分辨率下保持完全（非常接近）相同的大小。

我不确定是否回答了yopur的问题，我对javafx一无所知

但在普通CSS中，这似乎是可行的：

div{
利润率：10px；
}
#集装箱1{
字体大小：20px；
}
#集装箱2{
字体大小：30px；
}
#集装箱3{
字体大小：40px；
}
输入{
字体大小：继承；
宽度：0.8em；
高度：0.8em；
}

要素1
要素2
要素1
要素2
要素1
要素2

好的，我使用由创建的实用程序找到了我自己问题的答案 并根据我的需要稍加修改。我的大部分代码都很好，但我使用的选择器似乎对这两个都不起作用。我会把两个修改过的文件放在下面

单选按钮

.radio-button {
    /*-fx-font-size: 1em;*/
}

.radio-button .radio  {
    -fx-background-insets: 0em;
    -fx-border-insets: 0em;
    -fx-border-radius: 1em;
    -fx-padding: 0.25em;
}

.radio-button .dot {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-padding: 0.3em;
}

这些是更改大小所需的唯一选择器。我有一些其他的选择器用于悬停、聚焦等等，但它们只用于没有大小变化的样式。最大的变化是

.单选按钮->.单选按钮

复选框

.check-box {
    /*-fx-font-size: 1em;*/
}

.check-box .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
    -fx-padding: 0.2em;
}

.check-box .mark {
    -fx-background-insets: 0.083333em 0em 0.083333em 0em, 0em;
    -fx-padding: 0.4em;
    -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
}

就像RadioButton一样，还有其他选择器用于样式，但不用于大小。所有悬停、聚焦等选择器都将默认为我在.box选择器中使用的默认值。两个-fx填充标记会影响标记和框的大小，我的问题对它们做了一些更改。不过，与RadioButton一样，主要的变化是

.复选框->.复选框

我仍然不明白为什么这会导致任何问题，因为只要样式表被正确添加，它们就应该正常工作，但在我的例子中，.check框是唯一一个我想要的功能

---

希望这能帮助任何有类似问题的人

如果希望复选框和收音机保持相同大小，请不要将其值设置为相对单位，如：

em

、

rem

、百分比等。也不要使用任何固有单位，如：

vh

、

vw

等。请使用绝对单位，如

px

。顺便说一句，伪类

：armed

不是标准CSS…听起来像是有效的伪类

：checked

@zer00ne

：armed

是JavaFX特定的。@zer00ne但是如何使用绝对值使它们在视觉上保持相同的大小呢？从字面上说，这将使它们保持相同的大小，但这意味着在不同的分辨率下，它们会随着dpi的增加或减少而在视觉上增加或减少。我想改变每个分辨率的大小，使它们在视觉上看起来完全相同；因此是相对单位。您是否尝试了

rem

而不是

em

em

相对于其父级，

rem

相对于根（html）字体大小。这对html确实有效，但对于JavaFX控件，CSS的工作方式略有不同。HTML的使用更加干净。谢谢你的回答！