我正在编写这个设计并完成它但是在我的响应过程的最后一步有一个问题，同时尝试在我的设计中缩放框以适应480px屏幕而我不知道该怎么办？ / p>
我试着在@media（min-width：480px）下给它宽度和高度，但我发现其他媒体尺寸的宽度和高度都改变了！
请你看看@media（min-width：480px）这个部分并告诉我如何解决这个问题并调整灰色框和绿色的大小以适合这个屏幕？谢谢！
这是代码：
body {
background-image: url("../images/bg.png");
margin: 0;
padding: 0;
}
#wrapper {
width: 895px;
height: 493px;
position: relative;
top:-70px;
margin: 0 auto;
}
h1{
margin: auto;
position: relative;
bottom: 300px;
left: 125px;
}
h2{
margin: auto;
position: relative;
bottom: 240px;
left: 540px;
}
.box {
width: 578px;
height: 350px;
margin: auto;
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 */
position: relative;
top: 150px;
border-radius: 10px 10px 10px 10px;
}
.box2 {
width: 578px;
height: 81px;
margin: auto;
background: #82ba2a;
position: relative;
bottom: 200px;
border-radius: 10px 10px 0 0;
}
.arrow-down {
width: 0;
height: 0;
margin: auto;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #82ba2a;
position: relative;
bottom: 200px;
left: 200px;
z-index: 2;
}
.box3{
width: 578px;
height: 6px;
margin: auto;
background: #292929;
position: relative;
bottom: 230px;
z-index: 1;
}
.logo{
margin: auto;
position: relative;
bottom: 60px;
left: 300px;
}
h4{
margin: auto;
font-family: arial;
font-size: 12px;
color: #394256;
position: relative;
bottom: 30px;
}
h5{
margin: auto;
font-family: arial;
font-size: 12px;
color: #394256;
position: relative;
bottom: 25px;
}
button.login {
margin: auto;
width: 124px;
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{
width: 1px;
height: 180px;
margin: auto;
background: #e4e4e4;
position: absolute;
bottom: 35px;
left: 550px;
}
.contact_form{
text-align: center;
position: absolute;
bottom: 78px;
right: 385px;
border-color: #dbdbdb;
font-family: arial;
font-size: 14px;
font-weight: bold;
}
.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 {
margin: auto;
position: relative;
bottom: 220px;
left: 70px;
}
/*end*/
/* responsive part */
@media(min-width: 480px) {
.box {
right: 60px;
}
.box2 {
right: 60px;
}
.box3 {
right: 60px;
bottom: 230px;
}
.arrow-down {
left: 140px;
bottom: 200px;
}
.contact_form {
left: 80px;
}
.line {
left: 500px;
}
button.login {
left: 520px;
top: 390px;
}
h4 {
right: 50px;
}
h5 {
right: 50px;
}
}
@media(min-width: 768px) {
.box {
right: 60px;
}
.box2 {
right: 60px;
}
.box3 {
right: 60px;
bottom: 230px;
}
.arrow-down {
left: 140px;
bottom: 200px;
}
.contact_form {
left: 80px;
}
.line {
left: 500px;
}
button.login {
left: 520px;
top: 390px;
}
h4 {
right: 50px;
}
h5 {
right: 50px;
}
}
@media(min-width: 992px) {
.box {
right: 20px;
}
.box2 {
right: 20px;
}
.box3 {
right: 20px;
bottom: 230px;
}
.arrow-down {
left: 180px;
bottom: 200px;
}
.contact_form {
left: 150px;
}
.line {
left: 530px;
}
button.login {
left: 560px;
top: 390px;
}
h4 {
left: -20px;
}
h5 {
left: -20px;
}
h2 {
left: 580px;
}
h1 {
left: 160px;
}
.shadow {
left: 100px;
}
.logo {
left: 339px;
}
}
@media(min-width: 1200px) {
.box {
right: -3px;
}
.box2 {
right: -3px;
}
.box3 {
right: -3px;
bottom: 230px;
}
.arrow-down {
left: 203px;
bottom: 200px;
}
.contact_form {
left: 190px;
}
.line {
left: 553px;
}
button.login {
left: 583px;
top: 390px;
}
h4 {
left: 3px;
}
h5 {
left: 3px;
}
h2 {
left: 603px;
}
h1 {
left: 183px;
}
.shadow {
left: 123px;
}
.logo {
left: 362px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Do Business</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id=wrapper>
<div class="box"></div>
<div class="box2"></div>
<div class="arrow-down"></div>
<div class="box3"></div>
<h1><img src="images/logo.png" width="199" height="52" /></h1>
<h2><img src="images/key.png" width="92" height="92" /></h2>
<h3 class="logo"><img src="images/logofooter.png" width="178" height="47" /></h3>
<h4><center>2015 COPYRIGHTS, ALL RIGHETS RESERVED FOR DO-BUSINESS SOLUTIONS</center></h4>
<h5>
<p><center><a href="#">Privacy Policy</a> <a href="#">Terms of Use</a></center></p>
</h5>
<button class="login" type="submit">LOGIN</button>
<div class="line"></div>
<form class="contact_form" action="" method="post" name="contact_form">
USERNAME <input type="text" name="user">
<br>
<br>
<br>
PASSWORD <input type="password" name="password">
</form>
<div class="shadow"><img src="images/shadow.png" width="657" height="49" /></div>
</div>
</body>
</html>
答案 0 :(得分：0)
最佳方法是首先为移动设备设计样式，因此不需要仅针对平板电脑和大型设备进行媒体查询。
但是如果你想继续而不重塑整个网站，只需使用max-width而不是min-width。这样它就不会影响更大的分辨率。
答案 1 :(得分：0)
将此媒体查询仅用于移动设备
@media only screen and (min-width : 320px) and (max-width : 480px)
{
//put your styles here
}