css - CSS 媒体查询高度

Question

我刚刚学习了如何在用户调整窗口大小或具有不同的屏幕分辨率时使用 CSS 媒体查询使我的页面适合屏幕。

我的页面被设计成用户根本不需要滚动。我想让我的页面适合 1280 像素 x 768 像素和 1280 像素 x 960 像素的屏幕分辨率。问题是，当我有相似的宽度（1280 像素）时，页面会变得一团糟。

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

Answer 1

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

@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/

它是关于如何为不同分辨率创建多个样式表的优秀指南。