定义与屏幕分辨率无关的单选按钮大小
我正在格式化html单选按钮。 我想得到或多或少的东西(请忽略小字号和对齐)
我通过设置每个单独按钮的宽度和高度CSS属性来做到这一点。 例如在这里:
#r_starkeAblehnung.css-checkbox, #r_starkeZustimmung.css-checkbox {
border: 0px;
height: 50px;
width: 50px;
}
当我以75%的缩放比例查看我的Chrome窗口时(这是我在此页面的默认设置),这种方式很有效,但是当我查看100%缩放时,单选按钮会回到所有很小且尺寸相同的状态。 他们也失去了很酷的阴影 - 我想这与分辨率较差有关。 单选按钮尺寸仍然存在:我的元素占用更多空间。 但单选按钮不能相应地缩放。 我不太明白发生了什么事。
我尝试用em来定义单选按钮的大小,但没有帮助。
例如,将三种不同尺寸定义为1em,1.5em和3em导致:
编辑:jsfiddle,它在更改浏览器缩放时具有相同的行为
您应该考虑为单选按钮创建您自己的外观/样式。 像这样的东西:
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>
尝试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>
我认为em尺寸不起作用的原因是因为你没有定义文本的基本尺寸:em尺寸没有什么可以定义为'em'。
加入
body {
font-size: 14px;
}
应该在缩放时保持尺寸不变。
链接地址: http://www.djcxy.com/p/88139.html上一篇: Define radio button size independently of screen resolution
下一篇: How to call internal API from Rails view (for ReactJS prerender purpose)?