1
我正在編寫此設計，並且完成了它，但在響應過程的最後一步出現問題，同時嘗試縮放設計中的框以適合480像素的屏幕，我不知道該怎麼辦？在CSS中調整大小的框以適應響應過程中的480像素屏幕
我試圖在@media（min-width：480px）下給它寬度和高度，但是我發現其他介質尺寸的寬度和高度發生了變化！
你可以看看這節@media（min-width：480px），告訴我如何解決這個問題，並調整灰色框和綠色以適應這個屏幕？謝謝！
下面的代碼：僅適用於平板電腦和大型設備需要
body {
\t background-image: url("../images/bg.png");
\t margin: 0;
\t padding: 0;
}
#wrapper {
\t width: 895px;
\t height: 493px;
\t position: relative;
\t top:-70px;
\t margin: 0 auto;
\t
}
h1{
\t margin: auto;
\t position: relative;
\t bottom: 300px;
\t left: 125px;
\t
}
\t
h2{
\t margin: auto;
\t position: relative;
\t bottom: 240px;
\t left: 540px;
}
.box {
\t width: 578px;
\t height: 350px;
\t margin: auto;
\t background: -webkit-linear-gradient(280deg, #ffffff, #eeeded); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(280deg, #ffffff, #eeeded); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(280deg, #ffffff, #eeeded); /* For Firefox 3.6 to 15 */
background: linear-gradient(280deg, #ffffff, #eeeded); /* Standard syntax */
\t position: relative;
\t top: 150px;
\t border-radius: 10px 10px 10px 10px;
}
.box2 {
\t width: 578px;
\t height: 81px;
\t margin: auto;
\t background: #82ba2a;
\t position: relative;
\t bottom: 200px;
\t border-radius: 10px 10px 0 0;
}
.arrow-down {
\t width: 0;
\t height: 0;
\t margin: auto;
\t border-left: 30px solid transparent;
\t border-right: 30px solid transparent;
\t border-top: 30px solid #82ba2a;
\t position: relative;
\t bottom: 200px;
\t left: 200px;
\t z-index: 2;
}
.box3{
\t width: 578px;
\t height: 6px;
\t margin: auto;
\t background: #292929;
\t position: relative;
\t bottom: 230px;
\t z-index: 1;
}
.logo{
\t margin: auto;
\t position: relative;
\t bottom: 60px;
\t left: 300px;
}
h4{
\t margin: auto;
\t font-family: arial;
\t font-size: 12px;
\t color: #394256;
\t position: relative;
\t bottom: 30px;
}
h5{
\t margin: auto;
\t font-family: arial;
\t font-size: 12px;
\t color: #394256;
\t position: relative;
\t bottom: 25px;
}
button.login {
\t margin: auto;
\t width: 124px;
\t height: 31px;
position: absolute;
bottom: 80px;
left: 585px;
background-color: #2a2a2a;
background: -webkit-gradient(linear, left top, left bottom, from(#747474), to(#2a2a2a));
background: -webkit-linear-gradient(top, #747474, #2a2a2a);
background: -moz-linear-gradient(top, #747474, #2a2a2a);
background: -ms-linear-gradient(top, #6747474, #2a2a2a);
background: -o-linear-gradient(top, #747474, #2a2a2a);
background: linear-gradient(top, #747474, #2a2a2a);
border: 1px solid #2a2a2a;
border-bottom: 1px solid #2a2a2a;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
color: white;
font-weight: bold;
text-align: center;
text-shadow: 0 -1px 0 #2a2a2a;
}
button.login:hover {
opacity:.85;
cursor: pointer;
}
button.login:active {
border: 1px solid #2a2a2a;
box-shadow: 0 0 10px 5px #2a2a2a inset;
-webkit-box-shadow:0 0 10px 5px #2a2a2a inset ;
-moz-box-shadow: 0 0 10px 5px #2a2a2a inset;
-ms-box-shadow: 0 0 10px 5px #2a2a2a inset;
-o-box-shadow: 0 0 10px 5px #2a2a2a inset;
}
.line{
\t width: 1px;
\t height: 180px;
\t margin: auto;
\t background: #e4e4e4;
\t position: absolute;
\t bottom: 35px;
\t left: 550px;
}
.contact_form{
\t text-align: center;
\t position: absolute;
\t bottom: 78px;
\t right: 385px;
\t border-color: #dbdbdb;
\t font-family: arial;
\t font-size: 14px;
\t font-weight: bold;
\t
}
.contact_form input, .contact_form textarea {
padding-right:70px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
border:1px solid #dbdbdb;
border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
background: #ffffff;
border:1px solid #82ba2a;
box-shadow: 0 0 3px #aaa;
}
.shadow {
\t margin: auto;
\t position: relative;
\t bottom: 220px;
\t left: 70px;
\t
}
/*end*/
/* responsive part */
@media(min-width: 480px) {
\t .box {
\t \t right: 60px;
\t }
\t .box2 {
\t \t right: 60px;
\t }
\t .box3 {
\t \t right: 60px;
\t \t bottom: 230px;
\t }
\t .arrow-down {
\t \t left: 140px;
\t \t bottom: 200px;
\t }
\t .contact_form {
\t \t left: 80px;
\t }
\t .line {
\t \t left: 500px;
\t }
\t button.login {
\t \t left: 520px;
\t \t top: 390px;
\t }
\t h4 {
\t \t right: 50px;
\t }
\t h5 {
\t \t right: 50px;
\t }
}
@media(min-width: 768px) {
\t .box {
\t \t right: 60px;
\t }
\t .box2 {
\t \t right: 60px;
\t }
\t .box3 {
\t \t right: 60px;
\t \t bottom: 230px;
\t }
\t .arrow-down {
\t \t left: 140px;
\t \t bottom: 200px;
\t }
\t .contact_form {
\t \t left: 80px;
\t }
\t .line {
\t \t left: 500px;
\t }
\t button.login {
\t \t left: 520px;
\t \t top: 390px;
\t }
\t h4 {
\t \t right: 50px;
\t }
\t h5 {
\t \t right: 50px;
\t }
}
@media(min-width: 992px) {
\t .box {
\t \t right: 20px;
\t }
\t .box2 {
\t \t right: 20px;
\t }
\t .box3 {
\t \t right: 20px;
\t \t bottom: 230px;
\t }
\t .arrow-down {
\t \t left: 180px;
\t \t bottom: 200px;
\t }
\t .contact_form {
\t \t left: 150px;
\t }
\t .line {
\t \t left: 530px;
\t }
\t button.login {
\t \t left: 560px;
\t \t top: 390px;
\t }
\t h4 {
\t \t left: -20px;
\t }
\t h5 {
\t \t left: -20px;
\t }
\t h2 {
\t \t left: 580px;
\t }
\t h1 {
\t \t left: 160px;
\t }
\t .shadow {
\t \t left: 100px;
\t }
\t .logo {
\t \t left: 339px;
\t }
}
@media(min-width: 1200px) {
\t .box {
\t \t right: -3px;
\t }
\t .box2 {
\t \t right: -3px;
\t }
\t .box3 {
\t \t right: -3px;
\t \t bottom: 230px;
\t }
\t .arrow-down {
\t \t left: 203px;
\t \t bottom: 200px;
\t }
\t .contact_form {
\t \t left: 190px;
\t }
\t .line {
\t \t left: 553px;
\t }
\t button.login {
\t \t left: 583px;
\t \t top: 390px;
\t }
\t h4 {
\t \t left: 3px;
\t }
\t h5 {
\t \t left: 3px;
\t }
\t h2 {
\t \t left: 603px;
\t }
\t h1 {
\t \t left: 183px;
\t }
\t .shadow {
\t \t left: 123px;
\t }
\t .logo {
\t \t left: 362px;
\t }
}<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="utf-8">
\t <title>Do Business</title>
\t \t <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
\t <div id=wrapper>
\t \t <div class="box"></div>
\t \t <div class="box2"></div>
\t \t <div class="arrow-down"></div>
\t \t <div class="box3"></div>
\t \t <h1><img src="images/logo.png" width="199" height="52" /></h1>
\t \t <h2><img src="images/key.png" width="92" height="92" /></h2>
\t \t <h3 class="logo"><img src="images/logofooter.png" width="178" height="47" /></h3>
\t \t <h4><center>2015 COPYRIGHTS, ALL RIGHETS RESERVED FOR DO-BUSINESS SOLUTIONS</center></h4>
\t \t <h5>
\t \t \t <p><center><a href="#">Privacy Policy</a> <a href="#">Terms of Use</a></center></p>
\t \t </h5>
\t \t <button class="login" type="submit">LOGIN</button>
\t \t <div class="line"></div>
\t \t <form class="contact_form" action="" method="post" name="contact_form">
\t \t \t USERNAME <input type="text" name="user">
\t \t \t \t <br>
\t \t \t \t \t <br>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t PASSWORD <input type="password" name="password">
\t \t \t \t \t \t </form>
\t \t <div class="shadow"><img src="images/shadow.png" width="657" height="49" /></div>
\t </div>
</body>
</html>