Я хочу, чтобы высота моей кнопки была немного больше, чем по умолчанию, но я не знаю, каково значение по умолчанию.Я хочу сделать его динамичным, желательно с использованием% или vh / vw, чтобы он выглядел хорошо на каждом устройстве.Я также хочу знать% / vw / vh, который используется по умолчанию.
Я использовал хром, чтобы найти высоту тега body относительно высоты кнопки, а затем я установил высоту кнопки 9vh сCSS, но это не сработало, рост только увеличился.Затем я установил рост в 100%, но это не имело значения.
Мой код:
.choice{
width: calc(50vw - 12px);
height: 25vh;
text-align: center;
line-height: 1em;
font-size: 3.5vh;
overflow: hidden;
white-space: nowrap;
}
button, input[type="submit"]{
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
background-color: #0099FF;
color: #FFFFFF;
border-radius: 2px;
border: 2px solid #0099FF;
margin: 2px;
height: 9vh;
}
button:hover, input[type="submit"]:hover{
background-color: #FFFFFF;
color: #000000;
}
Я ожидал, что он будет выглядеть так же, как и при кодебыло бы так (я удалил атрибут высоты в разделе button, input[type="submit"], но вместо этого кнопки были очень большими!:
.choice{
width: calc(50vw - 12px);
height: 25vh;
text-align: center;
line-height: 1em;
font-size: 3.5vh;
overflow: hidden;
white-space: nowrap;
}
button, input[type="submit"]{
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
background-color: #0099FF;
color: #FFFFFF;
border-radius: 2px;
border: 2px solid #0099FF;
margin: 2px; /* height used to be specified below */
}
button:hover, input[type="submit"]:hover{
background-color: #FFFFFF;
color: #000000;
}