Question

我的代码有问题：

HTML

<section id="offer">
            <div class="container">
                <div class="row">
                    <div class="col col-md-12">
                        <h2>Offer</h2>
                        <p>
                            <img src="images/offer_img.jpg" class="img-responsive pull-left offer-img">
                            Vestibulum tristique turpis ac ligula pellentesque
                        </p>
                        <h4>We have the best offer in this country!</h4>
                        <ul>
                            <li><i class="fa fa-check"></i>morbi sollicitudin porttitor mi ac faucibus</li>
                            <li><i class="fa fa-check"></i>mi ullamcorper nisl laoreet placerat </li>
                            <li><i class="fa fa-check"></i>ut sem vitae dui bibendum</li>
                        </ul>
                        <p>Pellentesque placerat ante sit amet augue sagittis, quis laoreet ipsum egestas. Vestibulum tristique turpis ac ligula pellentesque, sit amet luctus velit vehicula. Curabitur malesuada leo sit amet nisi sagittis, mattis fringilla dui commodo. Morbi fringilla risus ut massa varius, at faucibus nibh maximus</p>
                        <p>Maecenas venenatis nisi non erat efficitur dictum</p>
                    </div>
                </div>
            </div>
        </section>

当屏幕调整到400px或更低时，我试图隐藏此部分。这是我的CSS-媒体查询代码。

@media all and(max-width:400px)
{
    .navbar-brand img
    {
        height: 63px;
    }

    #offer
    {
        display: none !important;
    }
}

Answer 1

@media (max-width: 400px) {
    #offer{
        display:none;
    }
}

Answer 2

如果您使用的是Bootstrap，则在h2上添加css类 hidden-sm （小型设备）平板电脑（≥768px））

 <section id="offer">
        <div class="container">
            <div class="row">
                <div class="col col-md-12">
                    <h2 class="hidden-sm">Offer</h2>
                    <p>
                        <img src="images/offer_img.jpg" class="img-responsive pull-left offer-img">
                        Vestibulum tristique turpis ac ligula pellentesque
                    </p>
                    <h4>We have the best offer in this country!</h4>
                    <ul>
                        <li><i class="fa fa-check"></i>morbi sollicitudin porttitor mi ac faucibus</li>
                        <li><i class="fa fa-check"></i>mi ullamcorper nisl laoreet placerat </li>
                        <li><i class="fa fa-check"></i>ut sem vitae dui bibendum</li>
                    </ul>
                    <p>Pellentesque placerat ante sit amet augue sagittis, quis laoreet ipsum egestas. Vestibulum tristique turpis ac ligula pellentesque, sit amet luctus velit vehicula. Curabitur malesuada leo sit amet nisi sagittis, mattis fringilla dui commodo. Morbi fringilla risus ut massa varius, at faucibus nibh maximus</p>
                    <p>Maecenas venenatis nisi non erat efficitur dictum</p>
                </div>
            </div>
        </div>
    </section>

≥400px

@media screen and (min-width: 0px) and (max-width: 400px) {
h2 { display: none !important; }  /* hide it on small screens */
}

希望它有所帮助

雷米

Answer 3

您不需要使用引导来实现此目的。只需修复您的媒体查询选择器，如下所示：

@media only screen and (max-width:400px) {

此外，请确保使用以下命令正确设置视口设置：

<meta name="viewport" content="width=device-width">

CSS中的媒体查询：display：none无效

3 个答案: