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

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

这是密码

@介质（最小宽度：1200px）{
*{边距：0；填充：0；}
#标题{
宽度：100%；高度：54px；背景色：#090；位置：固定；z指数：2；
}
#包装纸{
宽度：80%；背景色：#F7F4；边距：自动；
}
#类别1{
宽度：100%；背景色：#FF6；
}
#category1:：在{content:“”之后；显示：块；清除：两者；
}
#cat1_左侧{
宽度：20%；高度：350px；背景色：0FF；浮动：左侧；
}
#cat1_右侧{
宽度：80%；高度：350px；背景色：#636；浮动：右侧；颜色：白色；
}
#家用1类1盒1{
宽度：180px；位置：绝对；显示：内联；高度：350px；
}
#家庭用品类别1盒2{
宽度：390px；位置：绝对；显示：内联；高度：350px；左边距：200px；
}
#家庭用品类别1盒3{
宽度：390px；位置：绝对；显示：内联；高度：350px；左边距：577px；
}
#页脚{
宽度：100%；高度：100px；背景色：#2f；
}
}
@介质（最小宽度：768px）和（最大宽度：1199px）{
*{边距：0；填充：0；}
#标题{
宽度：100%；高度：54px；背景色：#090；位置：固定；z指数：2；
}
#包装纸{
宽度：80%；背景色：#F7F4；边距：自动；
}
#类别1{
宽度：100%；背景色：#FF6；
}
#category1:：在{content:“”之后；显示：块；清除：两者；
}
#cat1_左侧{
宽度：20%；高度：350px；背景色：0FF；浮动：左侧；
}
#cat1_右侧{
宽度：80%；高度：350px；背景色：#636；浮动：右侧；颜色：白色；
}
#家用1类1盒1{
宽度：180px；位置：绝对；显示：内联；高度：350px；
}
#家庭用品类别1盒2{
宽度：390px；位置：绝对；显示：内联；高度：350px；左边距：200px；
}
#家庭用品类别1盒3{
宽度：390px；位置：绝对；显示：内联；高度：350px；左边距：577px；
}
#页脚{
宽度：100%；高度：100px；背景色：#2f；
}
}
@介质（最小宽度：100px）和（最大宽度：767px）{
*{边距：0；填充：0；}
#标题{
宽度：100%；高度：54px；背景色：#090；位置：固定；z指数：2；
}
#包装纸{
宽度：80%；背景色：#F7F4；边距：自动；
}
#类别1{
宽度：100%；背景色：#FF6；
}
#category1:：在{content:“”之后；显示：块；清除：两者；
}
#cat1_左侧{
宽度：20%；高度：350px；背景色：#0FF；
}
#cat1_右侧{
宽度：80%；高度：350px；背景色：#636；颜色：白色；
}
#家用1类1盒1{
宽度：180px；位置：绝对；高度：350px；
}
#家庭用品类别1盒2{
宽度：390px；位置：绝对；高度：350px；左边距：200px；
}
#家庭用品类别1盒3{
宽度：390px；位置：绝对；高度：350px；左边距：577px；
}
#页脚{
宽度：100%；高度：100px；背景色：#2f；
}
}

负责式布局
收割台区域






1类水平滑块
男装
男士服装1
男士服装2
男装3


男士配饰
男士配件1
男士配饰2
男士配饰3

编辑问题和评论后编辑：

首先是一般性的评论（来自我最初的回答）：

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

这可以通过“移动优先”方法（一般规则适用于移动设备大小，然后部分被desktio规则覆盖）或“桌面优先”方法（一般规则适用于桌面，其中一些规则被移动设备大小覆盖）实现。我不会创建三套完全不同的规则-这太多了

---

关于您的代码：有很多事情我会更改，但我不会为您重新创建整个页面，因此这里只是对您的最后一条评论的评论和回答：

在CSS for mobile中，您有以下规则：

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

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

---

事实上，你不应该在那些

.home\u category1\u框

容器上使用

position:absolute

——这会使它们重叠，在这种情况下没有响应。只需将其删除，并尝试创建一个规则的容器和元素流。

现在我编辑了在上一个@media中错误编写的代码。我希望所有的div都是垂直样式的，如果页面向mobileah打开，那么在cat 1 div中-现在你有三套完全独立的规则-这就是你想要的吗？还有什么不能按你所希望的方式工作呢？是的，现在有3套规则是apply liek desktop、table和mobile。在移动设备中，布局结构消失，图像也变为水平，图像不会根据屏幕大小调整大小。如果我删除position:absolute，它将脱离div或我想要的结构。。。。请看图片。。。可能b我的编码对所有这些都是错误的。