gpt4 book ai didi

javascript - 如何使用 html5/javascript/css3(在 android webview 中)编写的计算器应用程序高度适应任何设备屏幕高度?

转载 作者:太空宇宙 更新时间:2023-11-04 05:57:53 25 4
gpt4 key购买 nike

我对所有内容都使用相对单位(百分比):字体、表格的宽度和高度等。但是包含计算器按钮和显示的表格仍然不匹配任何设备的屏幕尺寸。

我试过将每个按钮的“高度”属性设置为一定百分比,以及计算器的显示,这样我就可以使计算器框适合整个设备屏幕。

.botonesOP{

border-style:groove;
border-width:2px;
border-radius:10%;
text-align:center;
font-size:100%;
width:22.5%;
height:25%;



box-shadow: 7px 7px 30px rgb(113, 247, 135);
background: radial-gradient(rgb(12, 133, 42), rgb(13, 68, 5),
rgb(6, 44, 2));
color: white;

}

<!DOCTYPE HTML>

<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="operaciones.js"></script>
<link href="estiloscalc.css" rel="stylesheet"/>



</head>

<body>



<section>



<div>


<input type="text" id="display" readonly>

</div>


<input type="button" class="botonesN" onclick="siete()" value="7">
<button type="button" class="botonesN" onclick="ocho()">8</button>



<button type="button" class="botonesN" onclick="nueve()">9</button>

<button type="button" class="botonesOP" onclick="mas()">+</button>






<button type="button" class="botonesN" onclick="cuatro()">4</button>
<button type="button" class="botonesN" onclick="cinco()">5</button>

<button type="button" class="botonesN" onclick="seis()">6</button>

<button type="button" class="botonesOP" onclick="menos()">-</button>





<td><button type="button" class="botonesN" onclick="uno()">1</button>
<td><button type="button" class="botonesN" onclick="dos()">2</button>

<td><button type="button" class="botonesN" onclick="tres()">3</button>

<td><button type="button" class="botonesOP" onclick="multip()">x</button>






<button type="button" class="botonesN" onclick="punto()">.</button>
<button type="button" class="botonesN" onclick="cero()">0</button>

<button type="button" class="botonesN" onclick="igual()">=</button>

<button type="button" class="botonesOP" onclick="divis()">/</button>






<button type="button" class="botonesOP" onclick="ce()">C</button>
<button type="button" id="botonEspecial" onclick="cuo()">CÚO</button>


</section>






</body>






</html>

最佳答案

这是因为您的按钮高度百分比是相对于其父项的高度的。在这种情况下,按钮的父级是 section 标记。这个标签的默认高度只是所有组件适合的最小高度,而不是屏幕的高度。查看更多关于默认高度及其行为的信息 here .

您要做的是使 section 标记与屏幕高度相同。按钮将占此 section 标记高度的 25%,因此占屏幕高度的 25%。为此,您需要将 section 标记的高度设置为 100%。但同样,section 标记父项的高度 (body) 也具有所需的最小默认高度。所以您需要将 body 的高度也设置为 100%。 html 标签也是如此。

所以你只需要添加这段 css:

html, body, section {
height: 100%;
}

关于javascript - 如何使用 html5/javascript/css3(在 android webview 中)编写的计算器应用程序高度适应任何设备屏幕高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57605824/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com