移动平板电脑的响应式布局 [英] Responsive layout for mobile tablet
问题描述
我创建了一个电子商务页面，并添加了@media以使页面响应. 但它不能正常工作，您能看看我在哪里做错吗 另外如果我的编码风格是错误的，请更正.
I created an ecommerce page and added @media to make the page responsive. but its not working fine can you please take a look where I am doing mistake more over if my coding style is wrong then please correct . More over my images are not also responsive too..
这是代码
@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>
推荐答案
对问题和评论的修改后
首先(根据我的原始回答):
First a general remark (from my original answer):
通常的方法是先定义适用于 all 大小的通用规则，然后(在其后)定义媒体查询中的规则，这些规则会覆盖一些通用规则.
The usual way is to first define general rules which apply to all sizes and then (below that) define rules in media queries which overwrite some of the general rules.
这可以通过移动优先"方法(通用规则适用于移动尺寸，然后被Desktio规则部分覆盖)来完成，也可以使用桌面优先方法(通用规则适用于台式机，其中一些通用规则)覆盖移动尺寸).我不会创建三套完全不同的规则-太多了……
This can be done with a mobile-first approach (where the general rules apply to mobile sizes and are then partly overwritten by desktio rules) or with a desktop-first apporach (where the general rules are for desktop and some of them overwritten for mobile sizes). I would NOT create three completely different sets of rules - it's just too much...
现在您的代码:有很多事情我会改变，但是我不会为您重新创建整个页面，所以这里只是对您的最后评论的答复:
Now about your code: There are a lot of things I would change, but I won't recreate the whole page for you, so here is just a remark and answer to your last comment:
在移动CSS中，您具有以下规则:
In the CSS for mobile you have this rule:
#home_category1_boxes3{
width: 390px; position: absolute; height: 350px; margin-left: 577px;
}
这意味着将一个390px宽的容器放置在距离其容器/窗口左边界577px处，即，其右边界将是距离容器左边界967px的位置.但这是一个规则集的内部，该规则集仅适用于宽度小于768像素的屏幕，因此将其从容器中推出200像素-这根本行不通.因此，首先，更改该边距设置.
This means that a 390px wide container is placed 577px from the left border of its container/window, i.e. its right border will be 967px from the left border of the container. But that's inside a ruleset which only applies to screens below 768px width, so it is pushed out of the container by 200px - this simply cannot work. So, first of all, change that margin setting.
实际上，您不应该在这些.home_category1_boxes容器上使用position: absolute-在这种情况下，这会使它们重叠并且没有响应.只需删除它，然后尝试创建规则的容器和元素流即可.
Actually, you shouldn't use position: absolute on those .home_category1_boxes containers - it makes them overlap and not-responsive in this case. Just erase that and try to create a regular flow of containers and elements.
这篇关于移动平板电脑的响应式布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
