Question

帮助，我是媒体查询的新手，代码运行不正常。

代码HTML：

<div id="home-product-slider" class="home-section" style="display:none;">
<div class="col-sm-8 col-sm-offset-2">
    <div class="row mini-product-wrapper">
        <div class="col-sm-12">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/home_product_glasku_capuccino.png" alt="" class="img-responsive img-home-product ihp-thumb">
        <div class="product-box" style="margin-top:200px">
            <div class="product-hero-box text-left">
                <h4 style="color:white;">
                    <br/>GLASKU CAPPUCINO<br/>
                </h4>
                <div class="product-box-text">
                    <p>Glasku Cappuccino hadir dalam kemasan 165ml dalam variasi rasa kopi susu dengan harga yang affordable dengan tidak mengorbankan kualitas produk yang dihasilkan. Praktis dan menyegarkan untuk dinikmatin.</p>
                    <a href="/index.php/our-products/glasku/#0" class="small" style="color:white;">Read more >></a>
                </div>
            </div>
        </div>
      </div>
    </div>
</div>

代码CSS：

@media only screen and (max-width: 425px) {.img.img-responsive.img-home-product.ihp-thumb{ width: 10%; }} }

我已经在标题

中有这个

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="(max-width:650px)" href="custom.min.css">

有人能帮助我吗？谢谢！

Answer 1

以这种方式编写媒体查询 -

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

}

并删除媒体属性。

媒体查询在我的应用程序中无效

1 个答案: