html - @media-queries 不适用于屏幕尺寸 CSS

Question

我一直在尽我所能通过在网络上搜索来解决我的问题，但找不到与我的问题相关的任何内容。这两个月一直在学习CSS，所以水平不是很高。我正在尝试使用 CSS3 的功能:@media。

我在网站上有一个“事件”页面。左边有一张图片，我使用 float 将文本环绕在它周围。当屏幕尺寸大于 1400px 时，我想使用 @media 添加 padding-bottom : 20px。否则下面的文字会出现在图片后面。

我尽量减少代码量。这是 html 代码:

<div id="contenu_a">

<ul><img src="img/participate/ev/test.jpg" width="420" height="" style="margin: 20px;" ></ul>

<div>
<h1> Events </h1>   

<p> Mensarum enim voragines et varias voluptatum inlecebras, ne longiu progrediar, praetermitto illuc transiturus quod quidam per ampla spatia urbis subversasque silices sine periculi metu properantes equos velut publicos signatis quod dicitur calceis agitant, familiarium agmina tamquam praedatorios globos post terga trahentes ne Sannione quidem, ut ait comicus, domi relicto. quos imitatae matronae complures opertis capitibus et basternis per latera civitatis cuncta discurrunt.</p>     

</div>
</div>

<div id="contenu_b">                    
<div>

<h1> '.$donnees['title'].'</h1>

<p>'.$donnees['presentation'].'</p>

<button class="button" > More... </button>

</div>
</div> 

这是CSS代码:

/* Contenu_a */

#contenu_a h1
{
border-bottom: 1px solid black;
padding-bottom: 7px;
padding-top: 17px;
padding-left: 20px; 
font-size: 24px;
font-family: Futura, Arial, serif;
font-weight: normal;
margin-bottom: 20px;
}

#contenu_a div
{   
padding:1px 0;
color:black;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
border-radius: 10px;
-webkit-border-radius: 10px;
}

#contenu_a ul
{
padding-bottom:5px;
float: left;
}

#contenu_a p
{
padding-left: 20px;
padding-right: 20px;
padding-bottom:10px;
text-align: justify;
}

/* Contenu_b */

#contenu_b h1
{
border-bottom: 1px solid black;
margin-bottom:7px;
padding-bottom: 7px;
padding-top: 17px;
padding-left: 20px; 
font-size: 24px;
font-family: Futura, Arial, serif;
font-weight: normal;
}


#contenu_b div
{
padding:1px 0;
color:black;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
-webkit-box-shadow: rgba(3, 2, 2, 1) 0 0px 50px -1px;
box-shadow: rgba(3, 2, 2, 1) 0 0px 50px -1px;
border-radius: 10px;
-webkit-border-radius: 10px;
}

@media screen and (min-width: 1400px) {
  #contenu_a ul
{
    padding-bottom:20px;
}

Answer 1

您真的不需要在查询设置前面使用 screen 属性。您正在使用 min-width 属性来计算视口(viewport)的宽度。在你的问题中，你要求一种计算视口(viewport)高度的方法，我在这里有一个答案:

@media (min-height: 1400px)
{
   #content_a ul {
      padding-bottom: 20px;
   }
}

您还可以使用 和 规则为您的媒体查询设置一些最大值/最小值。在这种情况下，如果您希望在屏幕高度介于 800 和 1400 像素之间时出现填充，您可以选择 @media (min-height: 800px) and (max-height: 1400px) .