移动平板的响应式布局答案

【问题标题】：Responsive layout for mobile tablet移动平板的响应式布局
【发布时间】：2017-03-26 20:21:01
【问题描述】：

我创建了一个电子商务页面并添加了@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>

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

编辑问题和评论后编辑：

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

通常的方法是首先定义适用于所有尺寸的通用规则，然后（在此之下）定义覆盖某些通用规则的媒体查询规则。

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

现在关于您的代码：我会更改很多内容，但我不会为您重新创建整个页面，所以这里只是对您上一条评论的评论和回答：

在移动 CSS 中，您有以下规则：

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

这意味着一个 390px 宽的容器放置在距离其容器/窗口左边界 577px 的位置，即其右边界将距容器左边界 967px。但那是在一个规则集中，它只适用于宽度低于 768 像素的屏幕，所以它被推出容器 200 像素——这根本行不通。因此，首先，更改边距设置。

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

【讨论】：

现在我编辑了在最后一个@media 中错误编写的代码。如果页面打开到移动设备，我希望所有 div 都采用垂直样式和 cat 1 div
啊——所以现在你有了三组完全独立的规则——这就是你想要的吗？什么不能按您想要的方式工作？
是的，现在 3 套规则将适用于桌面、桌面和移动设备。在移动设备中，布局结构消失，图像也变为水平，图像不会根据屏幕尺寸调整大小。
如果我删除 position: absolute ，它将超出我想要的 div 或结构......看看图片imgur.com/a/YZOsy ...可能我的编码对所有人都是错误的这些。