Question

如何将此设计转换为自适应。请帮助我..
java脚本工作得很好。所以我只给了css和html代码。该设计在正常屏幕下工作良好，但不能在小屏幕上工作。

请帮助我......

谢谢.....

这是我的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 -->

Answer 1

首先，您需要<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%;。

当然，还有更多内容，但这是基本概念。

Answer 2

例如

在上述课程.flip-panel{}, .box1{}, .box2{} etc.,

中

您曾使用px值进行对齐，只需将其更改为%值即可。

如何将此代码转换为响应？

2 个答案: