Question

我只包含了“ main”的HTML代码，因为这是我希望能够通过媒体查询进行控制的部分。我希望只能在小于480px的视口上查看内容，但是浏览器似乎在所有视口尺寸上都隐藏了该内容。

下面的CSS媒体查询代码：

@media only screen and (min-width: 481px) {

                                             main { display:none;}

                                          }

} 下面的HTML代码。类“段落”只是对齐和字体的规则，因此在此未包括它们。开头和结尾的<main> </main>标签如下所示，仅为它们的内容

`

<p class="paragraph">

    Durango Jewelry and Gem Shop pampers you with one-of-a-kind, high quality wire-wrapped pendants and gems. Our works of art are inspired by natural<br>
    geometries and the vast beauty of mother nature.<br>





</p>


<p class="paragraph"> 


    <br>The featured pendant provides these characteristics :<br><br>


        <ul class="paragraph">

            <li class="listing"> <span style="color:red;">"Smoky Quartz"</span> gemstones, also called <span style="color:red;">"Soulmate Crystal"</span>  </li><br>
            <li class="listing"> gemstone is over 2 carats </li><br>
            <li class="listing"> high quality silver alloy requires very little polishing </li><br>



        </ul><br>


</p>


<p class="paragraph">

    Come over to our store !


</p>

}

Answer 1

尝试以下代码会有所帮助，您可以访问Mozilla开发人员页面以获取更多洞见 https://developer.mozilla.org/en-US/docs/Web/CSS/@media

@media (min-width: 481px) {
     main { display:none;}
}

Answer 2

请确保您在<head>部分中拥有此名称：<meta name="viewport" content="width=device-width, initial-scale=1">

说明：没有此元标记，媒体查询将不起作用。

为什么在不同视口中的浏览器会继续隐藏只为特定视口大小隐藏的内容？

2 个答案: