@media-queries不适合屏幕大小的CSS

Question

我一直在尝试一切我可以通过在网上搜索来解决我的问题，但我找不到任何与我有关的东西。我在过去的两个月里一直在学习CSS，所以我的水平不是很高。我正在尝试使用CSS3的功能:@media。

我在网站上有一个"events"页面。有一个图像在左边，我使用浮动来包围我的文字。当屏幕尺寸大于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属性，它计算你的视口的宽度。在你的问题中，你要求一种方法来计算视口的高度，我在这里有一个答案:

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

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

Answer 2

我很抱歉我不能快速回答，谢谢你的帮助，我找到了一个解决方案。在图像上插入填充底部是错误的，因为它的位置类型是float，所以它没有改变任何东西。但是把它应用在上面的文本上效果很好。

@media (min-width: 1300px) and (max-width: 1450px) {
  #contenu_a p
{
    padding-bottom:35px;

}
}
@media (min-width: 1450px) and (max-width: 1700px) {
  #contenu_a p
{
    padding-bottom:85px;

}
}

谢谢!