CSS媒体查询高度

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

我的页面被设计为使用户不必滚动。我想让我的页面适合1280像素，768像素和1280像素，960像素的屏幕分辨率。问题是，当我有相似的宽度（1280px）时，页面会全部搞乱。

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

来源

2012-04-20 Nick-S

“的页面得到全乱了” - 意味着什么？ – codef0rmer 2012-04-20 06:20:44

如果我为1280 X 768，1280 X 960和1280 X 1024创建页面，当我在1280 X 1024中查看页面时，页面被切断（高度） – 2012-04-20 15:02:32

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

这是对如何创建不同分辨率的多个样式表的优秀导游。

来源

2012-04-20 05:47:51

感谢Adam B，我们来看看它。 – 2012-04-20 15:03:26

只是为了澄清，当我做两个媒体查询具有相同的宽度，一个取消另一个。如何在不更改宽度值的情况下避免这种情况？下面是一个例子：媒体屏幕和（最大宽度：1280px）和（最大高度：960像素）{ 内容 } 媒体屏幕和（最大宽度：1280px）和（最大高度：1,024）{ 内容 } 媒体屏幕，（最大宽度：1280px）和（最大高度：720像素）{ 内容 } 出于某种原因，该论坛是不是让我来发帖而不删除“@”符号，所以不要这样墨水我错过了。 – 2012-04-25 01:33:18

您可以在特定dimmensions之间设置样式。例如，如下所示：

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

<styles go here> 

}

然后，无论何时视口位于这两个维度之间，您的样式都将遵守。

我刚刚意识到这篇文章有多大年纪，但我会继续前进，并且无论如何都要添加它，希望它能帮助别人。

来源

2013-06-30 21:45:32 Biggest

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

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

来源

2013-09-19 10:46:02

CSS媒体查询高度

回答

相关问题