Question

我正在查看引导程序布局http://tympanus.net/Freebies/Boxify/，并且左侧有一个带有iphone的部分。当我调整页面大小并使其缩小时 - 此设备会消失。有没有办法避免这种情况，只是把设备放在文本下面？

当我查看此页面的来源时，我可以在html中看到，此部分基本上分为两列：

<section class="showcase">
        <div class="showcase-wrap">
            <div class="texture-overlay"></div>
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="device wp3">
                            <div class="device-content">

                            (...)
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h1>Showcase your Product or Service</h1>
                        <p>(...)</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

，本节的CSS代码如下：

.showcase {
    background: url('../img/showcase-bg-fixed-01.jpg') no-repeat center center fixed;
    background-size: cover;
}
.showcase h1 {
    margin: 0 0 20px 0;
    color: #fff;
    font-weight: 400;
    font-size: 22px;
}
.showcase p {
    margin-bottom: 25px;
    color: #fff;
}
.device {
    position: absolute;
    top: -60px;
    left: 20%;
    min-height: 676px;
    width: 359px;
    background: url('../img/iphone-skeleton.png') no-repeat center center;
}
.device-content {
    position: absolute;
    top: 115px;
    left: 56px;
    width: 247px;
    height: 445px;
    background: rgba(0, 0, 0, 0.3);
}
.device-content img {
    width: 247px;
    height: 445px;
}
.showcase-wrap {
    position: relative;
    padding: 100px 0;
    min-height: 600px;
}

我认为这不是引导程序，我认为其原因在于自定义CSS代码本身... 我应该在此代码中更改以始终显示设备？

Answer 1

这是因为在媒体查询中修改了内容的CSS。媒体查询是解析为true或false的表达式。如果表达式解析为true，则应用样式。

在这种情况下，我们有一个媒体查询，它以某种方式为类.device（iPhone图像）修改CSS。如果您查看文件queries.css，您将看到以下媒体查询：

@media screen and (max-width:991px){
   .feature-1,.feature-2{margin-bottom:50px;}
   .device{display:none;}
   .screenshots ul li{width:50%;}
   .screenshots-intro{padding:110px 0 100px 0;}
   .feature-content{width:80%;}
   .features-slider{height:100%}
}

由于屏幕尺寸> max-width：991px，表达式解析为true。在这种情况下，请注意.device {display：none}。因此，不再呈现iPhone图像。

要了解有关CSS媒体查询的更多信息，请务必查看以下链接 http://www.w3schools.com/css/css_rwd_mediaqueries.asp

当我调整页面大小（bootstrap）时，为什么我的html代码的一部分消失了？

1 个答案: