独立于屏幕分辨率定义单选按钮大小

Question

我正在格式化 html 单选按钮。我想得到或多或少像这样的东西（请忽略小字体和对齐方式）

我通过设置每个单独按钮的宽度和高度 css 属性来做到这一点。例如这里：

#r_starkeAblehnung.css-checkbox, #r_starkeZustimmung.css-checkbox {
border: 0px;
height: 50px; 
width: 50px;
}

当我查看我的 Chrome window 缩放比例为 75% 时这有效 - 这是我此页面的默认设置 - 但当我查看 100% 缩放比例时，单选按钮返回到所有小，大小相等。他们也失去了冷色调——我想这与较差的分辨率有关。单选按钮尺寸仍然存在：我的元素占用更多 space。但是单选按钮不会相应地缩放。我不太明白发生了什么。

我尝试用 em 定义单选按钮的大小，但没有用。

例如，将三种不同的尺寸定义为 1em、1.5em 和 3em 结果如下：

编辑：jsfiddle，在更改浏览器缩放时具有相同的行为

Answer 1

您应该考虑为单选按钮创建自己的 look/style。像这样：

input[type=radio] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  outline: none;
  box-shadow: inset 0 0 0 2px #FFF;
  border: 2px solid #CCC;
}
input[type=radio]:checked {
  background-color: #CCC;
}

<input type="radio" name="radio" id="radio1" />
<label for="radio1">Radio 1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">Radio 2</label>

Answer 2

我认为 em 大小调整不起作用的原因是您没有为文本定义基本大小：em 大小没有任何可定义为“1”em 的东西。

添加

   body {
        font-size: 14px;
    }

应在缩放时保持尺寸不变。

Answer 3

试试 vertical-align: middle; 可能会有帮助

$("#questionAnswerRadio").css("display", "block");

#questionAnswerRadio {
    vertical-align: middle;
    padding: 0;
    /*margin-bottom: 60px;*/
    text-align: center;
    display: none;
    margin: auto;
}
#r_neutral.css-checkbox {
    border: 0px;
    height: 1em;
    width: 1em;
    vertical-align: middle;
    margin: 0;
}
#r_ablehnung.css-checkbox, #r_zustimmung.css-checkbox {
    border: 0px;
    height: 1.5em;
    vertical-align: middle;
    width: 1.5em;
    margin: 0;
}
#r_starkeAblehnung.css-checkbox, #r_starkeZustimmung.css-checkbox {
    border: 0px;
    height: 3em;
    vertical-align: middle;
    width: 3em;
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="questionAnswerRadio">
    <label for="r_starkeAblehnung" class="css-label">
        <input type="radio" id="r_starkeAblehnung" value="StarkeAblehnung" name="radio" class="css-checkbox"> <span>Starke Ablehnung</span>

    </label>
    <label for="r_ablehnung" class="css-label">
        <input type="radio" id="r_ablehnung" value="Ablehnung" name="radio" class="css-checkbox"> <span>Ablehnung</span>

    </label>
    <label for="r_neutral" class="css-label">
        <input type="radio" id="r_neutral" value="Neutral" name="radio" class="css-checkbox"> <span>Neutral</span>

    </label>
    <label for="r_zustimmung" class="css-label">
        <input type="radio" id="r_zustimmung" value="Zustimmung" name="radio" class="css-checkbox"> <span>Zustimmung</span>

    </label>
    <label for="r_starkeZustimmung" class="css-label">
        <input type="radio" id="r_starkeZustimmung" value="StarkeZustimmung" name="radio" class="css-checkbox"> <span>Starke Zustimmung</span>

    </label>
</div>

独立于屏幕分辨率定义单选按钮大小

Define radio button size independently of screen resolution

html

css

radio-button