Css 媒体查询问题

Question

您好，我创建了一个示例站点作为练习...为什么我的 < h3 id="art" > 在将屏幕缩小到 620 宽度以下的同时转到页脚部分，而且还有很大 space将会呈现.. 如何删除页脚下的 space，我也不希望我的话进入页脚

这里是示例站点：http://chess-master-guide-23476.bitballoon.com/views/main_page.html

有什么解决办法吗？

Answer 1

嗨，这是你的 css

#art {
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #4c4c4c 0px, #595959 12%, #666 25%, #474747 39%, #2c2c2c 50%, #000 51%, #111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%) repeat scroll 0 0;
  color: #fff;
  font-weight: 400;
  height: 572px;
  padding-left: 80px;
  padding-right: 200px;
}

你为此使用了固定高度 div 这就是问题所在。而且你正在使用 padding-left = 80px 和 padding-right = 200px; 这意味着您只需要 280px 用于桌面或大屏幕的填充它应该没问题，但对于移动设备或如您所说的小于 620px 的分辨率，您只有 280px 用于填充，这足以用于移动设备或小于 620px 的分辨率。其次，您为 div id "art" 使用固定高度所以这就是为什么 div 仍然保持相同的大小，但文本的长度增加了，因为宽度正在减少。所以你有两个问题。使用像

这样的动态高度

height: auto;

或者不使用高度属性然后高度将填充元素或对不同的设备使用媒体查询。它应该可以解决您的问题。现在你的文字不会下降。但是填充仍然会将您的文本推入较短的行中，因此您还必须调整填充。喜欢

@media screen and (max-width: 620px) {
  padding-left: 40px;
  padding-right: 100px;
}

希望对您有所帮助。谢谢

这是我刚刚更改的图片

高度：自动；

此图像来自 320X640 的设备模拟器

Css 媒体查询问题

Css media queries questions

css

media-queries