问题描述
我有一个包含多个按钮的文档,但我注意到在不同设备上时按钮的响应性不好。已经完成了几种样式设置,但在将其设置为适合移动设备使用时仍然存在问题。不好的是它分散在不同的设备上。请多多指教,因为我不熟悉这些东西。我正在使用的代码和样式如下所示。
*,*::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 (将#修改为@)