个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 04:04:20 25 4
gpt4 key购买 nike

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

25 4 0
文章推荐： css - Bootstrap 按钮颜色不起作用，但在 jsfiddle 中工作
文章推荐： iphone - 如何从 UIWebView 的 html 文件中调用 objective-c 代码？
文章推荐： javascript - 如何在 mozilla firefox 中使用 jquery 缩放网页正文
文章推荐： jquery - 背景/背景图像不起作用？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com