CSS媒体查询高度

Question

我刚刚学会了如何使用CSS媒体查询使用户在重新调整窗口大小时使页面适合屏幕，或者屏幕分辨率不同。

我的页面设计为用户无需滚动。 我想让我的页面适合1280像素×768像素和1280像素×960像素的屏幕分辨率。 问题是，当我有相似的宽度（1280px）时，页面会变得混乱。

有人可以帮助我吗？ 非常感谢你的帮助！

Answer 1

您可以在特定的dimmensions之间设置样式。例如，像这样：

@media(min-width:768px) and (max-width:979px){

<styles go here>

}

然后，只要视口位于这两个维度之间，您的样式就会坚持。

我刚刚意识到这篇文章有多久了，但我会继续添加它，希望能帮助别人。

Answer 2

使用逗号指定两个（或更多）不同的规则：

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
   ...
}

Answer 3

您可能想看看http://css-tricks.com/resolution-specific-stylesheets/

这是如何为不同分辨率创建多个样式表的绝佳指南。