@media-查询不适用于屏幕大小CSS
@media-查询不适用于屏幕大小CSS
提问于 2015-08-24 17:52:51
我已经尝试了所有我能解决的问题，通过在网络上搜索，但我找不到任何与我的相关的东西。我在过去的两个月里一直在学习CSS，所以我的水平并不是很高。我正在尝试使用CSS3：@media的功能。
我在网站上有一个名为“事件”的页面。在左边有一张图片，我用一个浮动在它周围换行。当屏幕尺寸大于1400px时，我想使用@media来添加padding: 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;
}回答 2
Stack Overflow用户
发布于 2015-08-24 17:59:46
您并不真正需要在查询设置的前面使用screen属性。您使用的是min-width属性，该属性计算视口的宽度。在你的问题中，你正在询问一种计算视口高度的方法，我在这里给出了答案：
@media (min-height: 1400px)
{
#content_a ul {
padding-bottom: 20px;
}
}您也可以使用and规则设置媒体查询的最大值/最小值。在这种情况下，如果您希望当屏幕高度在800到1400像素之间时出现填充，则可以使用@media (min-height: 800px) and (max-height: 1400px)。
Stack Overflow用户
发布于 2015-09-01 20:25:51
很抱歉我没能很快醒来，谢谢你的帮助，我找到了一个解决方案。在图像上插入填充底部是错误的，因为它的位置类型是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;
}
}谢谢！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32179305
复制相关文章
相似问题
腾讯云开发者
