如何使单选按钮和复选框根据系统分辨率改变大小？

Question

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

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

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

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

.RadioButton .radio  {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}

.RadioButton:focused .radio {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}

.RadioButton:hover .radio {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}
.RadioButton:armed .radio {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}

.RadioButton .dot {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-padding: 0.4em;
}

.RadioButton:selected .dot {
    -fx-background-insets: 0em;
}

截图

当所有这些都被使用时，RadioButton 会随着分辨率从 4K -> 1080p -> 720p 变得越来越大这让我觉得控件的某些部分仍然在使用它自己的内部硬大小。我知道通常你只是改变填充值来实现不同的大小，但正如你所看到的，填充值已经在这里用 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";
}

截图

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

预期

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

Answer 1

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

但简单来说 CSS，这似乎可行：

div {
    margin: 10px;
}

#container1 {
    font-size: 20px;
}

#container2 {
    font-size: 30px;
}

#container3 {
    font-size: 40px;
}

input {
    font-size: inherit;
    width: 0.8em;
    height: 0.8em;
}

<div id="container1">
  <input type="radio" id="r1" name="test" 
         checked>
  <label for="r1">elem 1</label>
  <input type="radio" id="r2" name="test">
  <label for="r2">elem 2</label>
</div>
<div id="container2">
  <input type="radio" id="r21" name="test2" 
         checked>
  <label for="r21">elem 1</label>
  <input type="radio" id="r22" name="test2">
  <label for="r22">elem 2</label>
</div>
<div id="container3">
  <input type="radio" id="r31" name="test3" 
         checked>
  <label for="r31">elem 1</label>
  <input type="radio" id="r32" name="test3">
  <label for="r32">elem 2</label>
</div>

Answer 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;
}

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

.RadioButton -> .radio-button

复选框

.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-padding 标签会影响标记和框的大小，并且根据我的问题对它们进行了一些更改。不过，与 RadioButton 一样，主要的变化是从

.CheckBox -> .check-box

我仍然不太明白为什么这会导致任何问题，因为只要正确添加了样式表，它们应该都能正常工作，但在我的例子中，.check-box 是唯一一个按我想要的方式运行的.

希望这对遇到类似问题的人有所帮助！

如何使单选按钮和复选框根据系统分辨率改变大小？

How can I make Radio Buttons and Check Boxes change size relative to the system resolution?

css

javafx

screen-resolution

javafx-css