Question

我创建了一个电子商务页面并添加了@media以使页面响应。但它不能正常工作，请你看看我做错了什么如果我的编码风格错了，请更正。更多关于我的图片也没有响应..

这是代码

＆＃13;

@media(min-width:1200px){
*{margin:0; padding:0;}
	
#header{
	width:100%; height:54px; background-color:#090; position:fixed; z-index:2;
		}
#wrapper{
	width:80%; background-color:#F7F4F4; margin:auto;
		}

#category1{
	width:100%; background-color:#FF6;
	}
#category1::after{content:" "; display:block; clear:both;
	}
#cat1_leftside{
	width:20%; height:350px; background-color:#0FF; float:left; 
	}

#cat1_rightside{
	width:80%; height:350px; background-color:#636; float:right; color: white; 
	}
#home_category1_boxes1{
	width: 180px; position: absolute; display: inline; height: 350px;
}
#home_category1_boxes2{
	width: 390px; position: absolute; display: inline; height: 350px; margin-left: 200px; 
}
#home_category1_boxes3{
	width: 390px; position: absolute; display: inline; height: 350px; margin-left: 577px; 
	
}

#footer{
	width:100%; height:100px; background-color:#2F2F2F;
	}
}


@media(min-width:768px) and (max-width:1199px){
	*{margin:0; padding:0;}
	
#header{
	width:100%; height:54px; background-color:#090; position:fixed; z-index:2;
		}
#wrapper{
	width:80%; background-color:#F7F4F4; margin:auto;
		}

#category1{
	width:100%; background-color:#FF6;
	}
#category1::after{content:" "; display:block; clear:both;
	}
#cat1_leftside{
	width:20%; height:350px; background-color:#0FF; float:left; 
	}

#cat1_rightside{
	width:80%; height:350px; background-color:#636; float:right; color: white; 
	}
#home_category1_boxes1{
	width: 180px; position: absolute; display: inline; height: 350px;
}
#home_category1_boxes2{
	width: 390px; position: absolute; display: inline; height: 350px; margin-left: 200px; 
}
#home_category1_boxes3{
	width: 390px; position: absolute; display: inline; height: 350px; margin-left: 577px; 
	
}

#footer{
	width:100%; height:100px; background-color:#2F2F2F;
	}
}
@media(min-width:100px) and (max-width:767px){
	*{margin:0; padding:0;}
	
#header{
	width:100%; height:54px; background-color:#090; position:fixed; z-index:2;
		}
#wrapper{
	width:80%; background-color:#F7F4F4; margin:auto;
		}

#category1{
	width:100%; background-color:#FF6;
	}
#category1::after{content:" "; display:block; clear:both;
	}
#cat1_leftside{
	width:20%; height:350px; background-color:#0FF; 
	}

#cat1_rightside{
	width:80%; height:350px; background-color:#636; color: white; 
	}
#home_category1_boxes1{
	width: 180px; position: absolute; height: 350px;
}
#home_category1_boxes2{
	width: 390px; position: absolute; height: 350px; margin-left: 200px; 
}
#home_category1_boxes3{
	width: 390px; position: absolute; height: 350px; margin-left: 577px; 
	
}

#footer{
	width:100%; height:100px; background-color:#2F2F2F;
	}
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resposive layout</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div id="header"> <h3> Header area </h3>   
    
   	</div>
<br>
<br>
<br>



<div id="wrapper">

       
    <div id="category1">
   	  <div id="cat1_leftside"><h3> Horizontal Slider Cat 1 </h3></div>
		
      <div id="cat1_rightside"><h3>  </h3></div>
      <div id="home_category1_boxes1">
			<ol><h3>Men Dress</h3> </ol>
       <ol>Men Dress 1</ol>
       <ol>Men Dress 2</ol>
       <ol>Men Dress 3</ol>
       <br>
			<ol><h3>Men Accessories</h3></ol>
       <ol>Men Accessories1</ol>
       <ol>Men Accessories2</ol>
       <ol>Men Accessories3</ol>
               	
        </div>
        <div id="home_category1_boxes2"> <img src="images/boxes/cat1/big.jpg" width="376" height="350"></div>
      <div id="home_category1_boxes3">
        <img src="images/boxes/cat1/box1.jpg" width="140px"/>
        <img src="images/boxes/cat1/box2.jpg" width="140px"/>
        <img src="images/boxes/cat1/box3.jpg" width="140px"/>
        <img src="images/boxes/cat1/box4.jpg" width="140px"/>
		</div>
    </div>
    
    <br>       
    <div id="footer">
    
    </div>
    
   	</div>


</body>
</html>

＆＃13;

Answer 1

在编辑问题和评论后编辑：

首先是一般性评论（来自我的原始答案）：

通常的方法是首先定义适用于所有大小的一般规则，然后（在此之下）定义媒体查询中的规则，这些规则会覆盖某些一般规则。

这可以通过移动优先方法（一般规则适用于移动规模，然后部分覆盖桌面规则）或桌面优先计划（一般规则适用于桌面和其中一些）来完成覆盖移动尺寸）。我不会创建三套完全不同的规则 - 它太多了......

现在关于你的代码：我会改变很多东西，但我不会为你重新创建整个页面，所以这里只是对你最后评论的评论和回答：

在CSS for mobile中你有这个规则：

#home_category1_boxes3{
  width: 390px; position: absolute; height: 350px; margin-left: 577px; 
}

这意味着一个390px宽的容器放置在距其容器/窗口左边界577px处，即它的右边界距离容器的左边界967px。但是规则集中的内容仅适用于宽度低于768px的屏幕，因此它被推出容器200px - 这根本无法工作。所以，首先，改变边际设置。

实际上，您不应该在position: absolute个容器上使用.home_category1_boxes - 在这种情况下，它会使它们重叠并且不响应。只需擦除它并尝试创建常规的容器和元素流。

移动平板电脑的响应式布局

1 个答案: