Question

我正在制作一个仅包含 html 和 css 的计算器。计算器运行良好，但在我的智能手机上看起来不太好。

我认为列间距或网格视图有问题。

如何让它在安卓和桌面上看起来都相似？

下面给出的 css 和 html 代码。

.calculator{
    position: relative;
    display: grid;
}

.calculator .value{
    grid-column: span 4;
    width:auto;
    height: 100px;
    text-align: right;
    border: none;
    outline:none;
    padding:10px;
    font-size:18px;
}
.calculator span{
    display: grid;
    width: 60px;
    height: 60px;
    color: #fff;
    background:#0c2835;
    /*place-items:center;*/
    border:1px solid rgba(0,0,0,.1);

}

.calculator span:active{
    background:#74ff3b;
    color:#111;

}

.calculator span.clear{
    grid-column: span 2;
    width: auto;
    background:#ff3070;
}

.calculator span.plus{
grid-row: span 2;
height: 120px;  
}

.calculator span.equal{
    background:#03b1ff;
}
@media only screen and (max-width: 600px){
[class*="calculator"] {
  width: auto%;
}
}

<!DOCTYPE html>
<html>
<head>
    <title>Calculator app</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="script.js"></script>
</head>
<body>

<form class="calculator" name="calc">
<input class="value" type="text" name=txt readonly="">
<span class="num clear" onclick="document.calc.txt.value=''">c</span>
<span class="num" onclick="document.calc.txt.value+='/'">/</span>
<span class="num" onclick="document.calc.txt.value+='*'">*</span>
<span class="num" onclick="document.calc.txt.value+='7'">7</span>
<span class="num" onclick="document.calc.txt.value+='8'">8</span>
<span class="num" onclick="document.calc.txt.value+='9'">9</span>
<span class="num" onclick="document.calc.txt.value+='-'">-</span>
<span class="num" onclick="document.calc.txt.value+='4'">4</span>
<span class="num" onclick="document.calc.txt.value+='5'">5</span>
<span class="num" onclick="document.calc.txt.value+='6'">6</span>
<span class="num plus" onclick="document.calc.txt.value+='+'">+</span>
<span class="num" onclick="document.calc.txt.value+='3'">3</span>
<span class="num" onclick="document.calc.txt.value+='2'">2</span>
<span class="num" onclick="document.calc.txt.value+='1'">1</span>
<span class="num" onclick="document.calc.txt.value+='0'">0</span>
<span class="num" onclick="document.calc.txt.value+='00'">00</span>
<span class="num" onclick="document.calc.txt.value+='.'">.</span>
<span class="num equal" onclick="document.calc.txt.value=eval(calc.txt.value)">=</span>


</body>
</html>

它在我的智能手机中看起来像下面给出的屏幕截图。我怎样才能让它看起来像这个网页的桌面版本。

Answer 1

我为您修复了您的代码，我停止设置其他值/自定义，因此您可以根据自己的喜好设置它，但它现在可以在 chrome 和 iphone 上进行测试。

rails db:reset

网页在桌面上看起来不错，但在我的智能手机上不好看

1 个答案: