<分区>
How can I convert this design to responsive.Please help me..
java script working good. So I gave only css and html code. The design working good in normal screen but not working in small screen.
请帮帮我...
谢谢你......
这是我的 css。
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
position: relative;
display:inline;
display: inline-block;
float: left;
margin-right: 2%;
margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/*-=-=-=-=-=-=-=-=-=-=- */
/* Flip Panel */
/*-=-=-=-=-=-=-=-=-=-=- */
.wrapper{ width: 100%; margin: 0 auto; background-color: #bdd3de; hoverflow: hidden;}
.flip-panel {
margin: 0 auto;
height: 130px;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.flip-panel .front,
.flip-panel .back {
text-align: center;
}
.flip-panel .front {
height: inherit;
position: absolute;
top: 0;
z-index: 900;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.flip-panel .back {
height: inherit;
position: absolute;
top: 0;
z-index: 1000;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.flip-panel.flip .front {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.flip-panel.flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
.box1{
background-color: #14bcc8;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.box2{
background-color: #ff7e70;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
这是我的 HTML5 部分
<div class="row">
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
<div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-duration="3s">
<div class="wrapper">
<div class="col_third">
<div class="hover flip-panel">
<div class="front">
<div class="box1">
<p>Front Side</p>
</div>
</div>
<div class="back">
<div class="box2">
<p>Back Side</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- ITEM END -->
</div><!-- SERVICE ITEMS END-->
</div><!-- SERVICE SECTION END -->
最佳答案
首先，您需要在 <head> 中使用它:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
然后在你的底部 css你需要这个:
@media only screen and (max-width : 960px) {
}
然后你必须从你的 css 中放置所有东西您想在此 @media only screen 下做出响应在大括号内并更改 width到 ％。通常使用 width:100%;有效。
当然，还有更多内容，但这是基本概念。
关于css - 如何将此代码转换为响应式代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29941611/