我创建了一个电子商务页面并添加了@media 以使页面响应。 但它不能正常工作，你能看看我哪里做错了吗 此外，如果我的编码风格有误，请更正。更重要的是我的图片也没有反应......
这是代码
@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;
}
}<!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>最佳答案
在编辑问题和评论后编辑:
首先是一般性评论(来 self 的原始回答):
通常的方法是首先定义适用于所有 尺寸的通用规则，然后(在其下方)定义媒体查询中的规则，以覆盖一些通用规则。
这可以通过移动优先方法(一般规则适用于移动尺寸，然后部分被桌面规则覆盖)或桌面优先方法(一般规则适用于桌面，其中一些覆盖移动尺寸)。我不会创建三套完全不同的规则 - 太多了...
现在关于你的代码:有很多东西我会改变，但我不会为你重新创建整个页面，所以这里只是对你最后评论的评论和回答:
在移动设备的 CSS 中有这条规则:
#home_category1_boxes3{
width: 390px; position: absolute; height: 350px; margin-left: 577px;
}
这意味着一个 390 像素宽的容器放置在距其容器/窗口左边界 577 像素的位置，即其右边界距容器左边界 967 像素。但这是在仅适用于宽度低于 768 像素的屏幕的规则集中，因此它被推出容器 200 像素 - 这根本行不通。因此，首先，更改边距设置。
实际上，您不应该在那些 .home_category1_boxes 容器上使用 position: absolute - 在这种情况下，这会使它们重叠并且没有响应。只需删除它并尝试创建容器和元素的常规流。
关于html - 移动平板电脑的响应式布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43028173/