Question

为什么我的网页无法响应？如何才能使其响应？按钮在小屏幕上变得笨拙。 [可选]有没有办法让按钮大小更大并同时建立网站？[可选]响应如果使用bootstrap有任何解决方案也没问题。

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="Calculator.css">
</head>
<body>
    <div id="container">
        <div id="display">
        </div>
        <div id="buttons">
            <button id="clear" class="btn btn-default">CLEAR</button>
            <button value="/" class="btn btn-default">÷</button>
            <button value="*" class="btn btn-default">x</button><br><br>
            <button value="7" class="btn btn-default">7</button>
            <button value="8" class="btn btn-default">8</button>
            <button value="9" class="btn btn-default">9</button>
            <button value="-" class="btn btn-default">-</button><br><br>
            <button value="4" class="btn btn-default">4</button>
            <button value="5" class="btn btn-default">5</button>
            <button value="6" class="btn btn-default">6</button>
            <button value="+" class="btn btn-default">+</button><br><br>
            <div id="float">
                <button value="1" class="btn btn-default">1</button>
                <button value="2" class="btn btn-default">2</button>
                <button value="3" class="btn btn-default">3</button><br><br>
                <button id="zero" value="0" class="btn btn-default">0</button>
                <button value="." class="btn btn-default">.</button>
                <button id="equal" class="btn btn-default">=</button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="Calculator.js"></script>
</body>
</html>

CSS：

body
{
    background: lightblue;
}

#container
{
    text-align: center;
    margin: 200px auto;
    width: 10%;
}

#display
{
    text-align: right;
    margin-bottom: 5px;
    height: 50px;
    border: 2px solid gray;
    background: lightblue;
}

button
{
    width: 30px;
}

.btn-default
{
    background: white;
    color: black;
    border: none;
    outline-style: none;
}

.btn-default:hover
{
    background: black;
    color: white;
    border: none;
    outline-style: none;
}

#clear, #zero
{
    width: 65px;
}

#equal
{
    position: absolute;
    margin-left: 52px;
    margin-top: -87px;
    height: 87px;
}

#buttons
{
    display: inline-block;
}

#float
{
    float: left;
}

Answer 1

在你做出响应之前，你必须在你的<; p>中加入一个视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

从width: 10%;

中删除#container

＆＃13;

body
{
    background: lightblue;
}

#container
{
    text-align: center;
    margin: 200px auto;
    
}

#display
{
    text-align: right;
    margin-bottom: 5px;
    height: 50px;
    border: 2px solid gray;
    background: lightblue;
}

button
{
    width: 30px;
}

.btn-default
{
    background: white;
    color: black;
    border: none;
    outline-style: none;
}

.btn-default:hover
{
    background: black;
    color: white;
    border: none;
    outline-style: none;
}

#clear, #zero
{
    width: 65px;
}

#equal
{
    position: absolute;
    margin-left: 52px;
    margin-top: -87px;
    height: 87px;
}

#buttons
{
    display: inline-block;
}

#float
{
    float: left;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="Calculator.css">
</head>
<body>
    <div id="container">
        <div id="display">
        </div>
        <div id="buttons">
            <button id="clear" class="btn btn-default">CLEAR</button>
            <button value="/" class="btn btn-default">÷</button>
            <button value="*" class="btn btn-default">x</button><br><br>
            <button value="7" class="btn btn-default">7</button>
            <button value="8" class="btn btn-default">8</button>
            <button value="9" class="btn btn-default">9</button>
            <button value="-" class="btn btn-default">-</button><br><br>
            <button value="4" class="btn btn-default">4</button>
            <button value="5" class="btn btn-default">5</button>
            <button value="6" class="btn btn-default">6</button>
            <button value="+" class="btn btn-default">+</button><br><br>
            <div id="float">
                <button value="1" class="btn btn-default">1</button>
                <button value="2" class="btn btn-default">2</button>
                <button value="3" class="btn btn-default">3</button><br><br>
                <button id="zero" value="0" class="btn btn-default">0</button>
                <button value="." class="btn btn-default">.</button>
                <button id="equal" class="btn btn-default">=</button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="Calculator.js"></script>
</body>
</html>

＆＃13;

按钮在小屏幕上变得笨拙

2 个答案: