我有一个市场类型的网页即时工作,但我似乎无法让产品(div元素)响应。在调整窗口大小或在移动设备上查看窗口时看起来很糟糕。我在这里做错了什么?
<div class="productlayout">
<div class="products">
<div id="col-1">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title1">Official Mens T-Shirt</h3>
<h4 class="price1">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-2">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title2">Mens Tank</h3>
<h4 class="price2">$29.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-3">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title3">Mens Sweatpants</h3>
<h4 class="price3">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
</div>
</div>
CSS
.productlayout {
display: flex;
flex-direction: row;
height: 500px;
}
.products {
display: flex;
flex-grow: 1;
background-color: #c7c4c4;
margin: 0px 40px;
justify-content: space-around;
padding: 30px 0px;
}
#col-1 {
background: #1d1d1d;
width: 320px;
order: 1;
box-shadow: 0px 0px 1px 1px #000;
}
#col-1 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
#col-2 {
background: #1d1d1d;
width: 320px;
order: 2;
box-shadow: 0px 0px 1px 1px #000;
}
#col-2 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
#col-3 {
background: #1d1d1d;
width: 320px;
order: 3;
box-shadow: 0px 0px 1px 1px #000;
}
#col-3 img { /*Product Image placement settings */
width: 75%;
display: block;
margin: 20px auto 0 auto;
}
.lineunderproduct {
width: 75%;
margin: 0 auto;
margin-top: 20px;
}
.title1 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.title2 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.title3 {
color: #e0dcdc;
text-align: center;
font-size: 20px;
font-family: 'Droid Serif', serif;
}
.price1 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
.price2 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
.price3 {
color: #959393;
font-family: 'Droid Serif', serif;
font-size: 15px;
text-align: center;
font-style: italic;
}
/* Add to Cart Buttons */
.btn {
border: none;
font-family: 'Droid Serif', serif;
font-size: 20px;
color: #1d1d1d;
background: none;
cursor: pointer;
padding: 20px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: none;
outline: none;
position: relative;
box-shadow: 0px 0px 0px 3px #D4AF37;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5 {
background: #fff;
color: #1d1d1d;
height: 40px;
min-width: 260px;
line-height: 30px;
font-size: 20px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-5:active {
background: #9053a9;
top: 2px;
}
.btn-5 span {
display: inline-block;
letter-spacing: 0.1px;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
.btn-5:before {
position: absolute;
height: 100%;
width: 100%;
line-height: 1.5;
font-size: 180%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5:active:before {
color: #703b87;
}
/* Button 5a */
.btn-5a:hover span {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}
.btn-5a:before {
left: 0;
top: -100%;
}
.btn-5a:hover:before {
top: 0;
/* Hover backgorund change background-color: #308014; */
}
@media (max-width: 800px) {
.products {
flex-direction: column;
}
答案 0 :(得分:0)
您需要为您的设计添加媒体查询才能提供响应,并且始终尝试使用%来为响应式设计提供宽度
屏幕的媒体查询示例小于768像素
@media only screen and (max-width: 768px) {
.products {
display:block;
}
#col-1 {width: 100%;}
#col-2 {width: 100%;}
#col-3 {width: 100%;}
}
在展开视图和小视图上查看以下示例以查看影响。
.productlayout {
display: flex;
flex-direction: row;
height: 500px;
}
.products {
display: flex;
flex-grow: 1;
background-color: #c7c4c4;
margin: 0px 40px;
justify-content: space-around;
padding: 30px 0px;
}
#col-1 {
background: #1d1d1d;
width: 33%;
order: 1;
box-shadow: 0px 0px 1px 1px #000;
}
#col-2 {
background: #1d1d1d;
width: 33%;
order: 2;
box-shadow: 0px 0px 1px 1px #000;
}
#col-3 {
background: #1d1d1d;
width: 33%;
order: 2;
box-shadow: 0px 0px 1px 1px #000;
}
@media only screen and (max-width: 768px) {
.products {
display:block;
}
#col-1 {width: 100%;}
#col-2 {width: 100%;}
#col-3 {width: 100%;}
}
You need to write media queries for different view ports to make your design responsive.
for smaller screen you can make add this css.
&#13;
<div class="productlayout">
<div class="products">
<div id="col-1">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title1">Official Mens T-Shirt</h3>
<h4 class="price1">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-2">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title2">Mens Tank</h3>
<h4 class="price2">$29.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
<div id="col-3">
<img src="originallogo.png">
<hr class="lineunderproduct">
<h3 class="title3">Mens Sweatpants</h3>
<h4 class="price3">$49.99</h4>
<button class="btn btn-5 btn-5a glyphicon glyphicon-shopping-cart"><span>Purchase</span></button>
</div>
</div>
</div>
&#13;