微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

在其他设备上时，我页面上的按钮没有响应

分类：编程问答

如何解决在其他设备上时，我页面上的按钮没有响应

我有一个包含多个按钮的文档，但我注意到在不同设备上时按钮的响应性不好。已经完成了几种样式设置，但在将其设置为适合移动设备使用时仍然存在问题。不好的是它分散在不同的设备上。请多多指教，因为我不熟悉这些东西。我正在使用的代码和样式如下所示。

*,*::before,*::after {
    Box-sizing: border-Box;
}

body {
    background-image: url(img/image\ 1.png);
    background-size: cover;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    /* width: 65%;
   max-width: 90%;
  background-color: #F2FCFC;
  display: flex;
  border-radius: 15px;
  margin: 0 auto;
  margin-top: 5%;
  height: 800px;   */
    width: 80%;
    background-color: #F2FCFC;
    display: flex;
    border-radius: 15px;
    margin: 0 auto;
    margin-top: 5%;
    height: 1100px;
}

.header {
    background: #232B3D;
    border-radius: 8px;
    margin: 0 auto;
    width: 90%;
    height: 190px;
    margin-top: 20px;
}

.header_title {
    display: flex;
    justify-content: center;
    font-family: 'Roboto',sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 10px;
    color: #FFFFFF;
    margin-top: 40px;
}

.header_Vote_number {
    display: flex;
    justify-content: center;
    font-family: 'Roboto',sans-serif;
    font-style: normal;
    color: #FFFFFF;
    opacity: 0.6;
    font-weight: 900;
    font-size: 30px;
    line-height: 10%;
    margin-top: 40px;
}

.progress_bar {
    position: relative;
    left: 50%;
    display: flex;
    justify-content: center;
    width: 62%;
    height: 11px;
    background: #F7B354;
    Box-shadow: 0px 4px 4px rgba(0,0.25);
    border-radius: 22px;
    transform: translateX(-50%);
}

.grid2x2 {
    margin-top: 40px;
    min-height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.grid2x2>div {
    display: flex;
    flex-basis: calc(50% - 40px);
    justify-content: center;
    flex-direction: column;
}

.grid2x2>div>div {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.Box {
    margin: 20px;
}

.Box1 {
    background-color: #F2FCFC;
}

.Box2 {
    background-color: #F2FCFC;
}

.Box3 {
    background-color: #F2FCFC;
}

.Box4 {
    background-color: #F2FCFC;
}

.Box5 {
    background-color: #F2FCFC;
}

.Box6 {
    background-color: #F2FCFC;
}


/* .inner_grid{
  display: flex;
  flex-direction: row;
} */

.grid-container {
    display: grid;
    /* gap: 20%; */
    /* grid-gap: 2px; */
    grid-template-columns: auto auto auto;
    background-color: #F2FCFC;
    padding: 10px;
}

.grid-item {
    padding: 10px;
    font-size: 30px;
    /* text-align: center; */
}

.name {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
}

img {
    /* border-radius: 50%; */
    border-radius: 50%;
    height: 100px;
    /* margin: 0 auto; */
    width: 100px;
    overflow: hidden;
    transition: top .2s ease-in-out,width .5s,height .5s;
}


/* 
input {
    margin: 0;
    padding: 0;
    border: none;
}

input:focus {
    border: none;
    outline: none;
}

form {
    text-align: center;
    margin-top: 20px;
}

.quantity input {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    text-align: center;
    background: #fff;
    border: 1px solid #ccc;
    border-right: none;
}

.quantity input:last-child {
    border-right: 1px solid #ccc;
}

input[type="button"] {
    cursor: pointer
} */

@media screen and (max-width: 750px) {
    .main {
        width: fit-content;
        height: 1900px;
        overflow: hidden;
    }
}


/* .leader_board_button {
    position: relative;
    width: 270px;
    height: 50px;
    left: 441px;
    top: 40px;
    background: #1E2A5A;
    border-radius: 10px;
} */

.leader_board_button {
    /* text-align: center;
    height: 21px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21px;
     identical to Box height 
    text-align: center;
    color: #FFFFFF;
    */
}

a.button1 {
    display: inline-block;
    background: #1E2A5A;
    padding: 0.35em 1.5em;
    border: 0.1em solid #FFFFFF;
    margin: 0 0.3em 0.3em 0;
    border-radius: 0.12em;
    Box-sizing: border-Box;
    text-decoration: none;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    /* identical to Box height */
    text-align: center;
    color: #FFFFFF;
    transition: all 0.2s;
    margin-left: 40%;
    margin-top: 20px;
    width: 200px;
}

@media all and (max-width:30em) {
    a.button1 {
        display: block;
        margin: 0.4em auto;
    }
    .error_message {
        /* margin-right: 20px; */
        /* margin-right: 5%; */
    }
}

.error_message {
    text-align: center;
    /* width: 137px;
    height: 21px; */
    /* margin-left: 47%; */
    margin-top: 10px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 15px;
    line-height: 21px;
    color: #EE1A30;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <title>Voting System</title>
</head>

<body>
    <div class="main">
        <div class="header">
            <h3 class="header_title">My Available Votes</h3>
            <h6 class="header_Vote_number">10</h6>
            <div class="progress_bar"></div>
            <ul class="countries">
                <div class="grid2x2">
                    <div class="Box Box1">
                        <div class="grid-container">

                            <div class="grid-item"><img src="
https://secureservercdn.net/160.153.138.219/c8q.4f6.myftpupload.com/wp-content/uploads/2020/08/BB5-Ozo-2.png" alt="" style=""></div>
                            <div class="grid-item">
                                <div class="name">Erica </div>
                                <form method='POST' action='#'>
                                    <div class="country">
                                        <!-- <input type='button' value='-' class='minus' field='quantity' /> -->
                                        <button id="plus" type="button">+</button>
                                        <span id="Contestant_One" class="Contestant-Erica">0</span>
                                        <!-- <input type='text' name='quantity' value='0' class='qty' /> -->
                                        <!-- <input type='button' value='+' class='plus' field='quantity' /> -->
                                        <button id="minus" type="button">-</button>
                                    </div>
                                </form>
                            </div>


                        </div>
                    </div>







                    <div class="Box Box1">
                        <div class="grid-container">

                            <div class="grid-item"><img src="
https://secureservercdn.net/160.153.138.219/c8q.4f6.myftpupload.com/wp-content/uploads/2020/08/BB5-Ozo-2.png" alt="" style=""></div>
                            <div class="grid-item">
                                <div class="name">Ozo</div>
                                <form method='POST' action='#'>
                                    <div class="country">
                                        <!-- <input type='button' value='-' class='minus' field='quantity' />
                                        <span id="Contestant_Two" class="Contestant-One">0</span>
                                         <input type='text' name='quantity' value='0' class='qty' /> -->
                                        <!-- <input type='button' value='+' class='plus' field='quantity' /> -->
                                        <button id="plus" type="button">+</button>
                                        <span id="Contestant_Two" class="Contestant-Ozo">0</span>
                                        <button id="minus" type="button">-</button>
                                    </div>
                                </form>
                            </div>


                        </div>
                    </div>

                    <div class="Box Box1">
                        <div class="grid-container">

                            <div class="grid-item"><img src="
https://secureservercdn.net/160.153.138.219/c8q.4f6.myftpupload.com/wp-content/uploads/2020/08/BB5-Ozo-2.png" alt="" style=""></div>
                            <div class="grid-item">
                                <div class="name">Kiddwaya </div>
                                <form method='POST' action='#'>
                                    <div class="country">
                                        <button id="plus" type="button">+</button>
                                        <span id="Contestant_Three" class="Contestant-Kidd">0</span>
                                        <button id="minus" type="button">-</button>
                                    </div>
                                </form>
                            </div>


                        </div>
                    </div>

                    <div class="Box Box1">
                        <div class="grid-container">

                            <div class="grid-item"><img src="
https://secureservercdn.net/160.153.138.219/c8q.4f6.myftpupload.com/wp-content/uploads/2020/08/BB5-Ozo-2.png" alt="" style=""></div>
                            <div class="grid-item">
                                <div class="name">Dorathy</div>
                                <form method='POST' action='#'>
                                    <div class="country">
                                        <button id="plus" type="button">+</button>
                                        <span id="Contestant_Four" class="Contestant-Dorathy">0</span>
                                        <button id="minus" type="button">-</button>
                                    </div>
                                </form>
                            </div>


                        </div>
                    </div>

                    <div class="Box Box1">
                        <div class="grid-container">

                            <div class="grid-item"><img src="
https://secureservercdn.net/160.153.138.219/c8q.4f6.myftpupload.com/wp-content/uploads/2020/08/BB5-Ozo-2.png" alt="" style=""></div>
                            <div class="grid-item">
                                <div class="name">Vee </div>
                                <form method='POST' action='#'>
                                    <div class="country">
                                        <button id="plus" type="button">+</button>
                                        <span id="Contestant_Five" class="Contestant-Vee">0</span>
                                        <button id="minus" type="button">-</button>
                                    </div>
                                </form>
                            </div>


                        </div>
                    </div>

                    <div class="Box Box1">
                        <div class="grid-container">

                            <div class="grid-item"><img src="
https://secureservercdn.net/160.153.138.219/c8q.4f6.myftpupload.com/wp-content/uploads/2020/08/BB5-Ozo-2.png" alt="" style=""></div>
                            <div class="grid-item">
                                <div class="name">Laycon</div>
                                <form method='POST' action='#'>
                                    <div class="country">
                                        <button id="plus" type="button">+</button>
                                        <span id="Contestant_Six" class="Contestant-Laycon">0</span>
                                        <button id="minus" type="button">-</button>
                                    </div>
                                </form>
                            </div>


                        </div>
                    </div>

                </div>

            </ul>
            <div class="leader_board_button">
                <a href="./leader_Board/leaderboard.html" class="button1" id="myBtn"> View leaderboard </a>
            </div>






















            <div class="error_message"></div>




            <div id="image_display"></div>


        </div>


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

</html>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot