gpt4 book ai didi

html - 为什么不同视口(viewport)中的浏览器会一直隐藏我只想针对特定视口(viewport)大小隐藏的内容?

转载 作者:行者123 更新时间:2023-11-28 00:10:49 28 4
gpt4 key购买 nike

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

下面的 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>

最佳答案

确保你在 <head> 中有这个部分:<meta name="viewport" content="width=device-width, initial-scale=1">

说明:没有这个元标记,媒体查询就不起作用。

关于html - 为什么不同视口(viewport)中的浏览器会一直隐藏我只想针对特定视口(viewport)大小隐藏的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55409883/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com