Question

我现在一直在使用查询并抓取一些预加载的宽度等取决于它将是什么类型（手机，笔记本电脑，平板电脑甚至普通屏幕），我意识到它一直在使用最小宽度和最大宽度而没有做高度？所以我将它改为最大宽度，最大高度，现在它似乎与不同的屏幕相冲突。所以我把它切换回最小宽度和最大宽度，但同样的问题。

我对如何使用它们感到很困惑。我查看了大量的教程和各种各样但我仍然不理解。有人可以帮助我吗？

下面是我放在一起的两个查询冲突以及我猜测的原因是由于最大宽度相同？

我将一个改为最大高度但仍然无法工作所以我真的不知道。

我想要创建媒体查询的屏幕尺寸如下： 1280 x 768并且是风景。我也想做：1280 x 720

媒体查询屏幕1280 x 768：

@media only screen 
  and (min-width: 768px) 
  and (max-width: 1280px) 
  and (orientation: landscape) 
{
/*css here*/
}

屏幕代码1280 x 720：

@media only screen 
  and (min-width: 720px) 
  and (max-width: 1280px) 
  and (orientation: landscape) 
{
/*css here*/
}

我尝试了什么？

我尝试执行以下操作失败：

@media only screen 
 and (max-height: 720px) 
 and (orientation: landscape) 
{
 /*Screen 1280 x 720*/
}



@media only screen 
and (max-width: 1280px) 
and (orientation: landscape) 
{
 /*Screen 1280 x 768*/
}

我做错了什么？我试着按宽度匹配高度，所以最大宽度：1280和最大高度：768让对于其他res说同样也没有看起来..看起来像屏幕“1280 x 768”为屏幕选择了css“ 1280 x 720“

所有人都很感激！感谢。

Answer 1

你的第一条规则与你的第二条规则相矛盾。

1280px x 768与w x h相同。所以高度将是768，而不是最小宽度 - 但这不是必需的。

@media only screen 
  and (min-height: 720px) 
  and (max-width: 1280px) 
  and (orientation: landscape) 
{
/*css here*/
}

（你可以在这里使用max-height）

@media only screen 
  and (min-height: 768px) 
  and (max-width: 1280px) 
  and (orientation: landscape) 
{
/*css here*/
}

Answer 2

一些奇怪的原因是它接收了两个查询，所以我只是通过制作任何小尺寸以适应两者而无论尺寸大小都适用于它们。

示例：

background-color: red;
height: 500px; // I want this for one red and 1200 for another lets say

如果我制作高度1200它会把它吹得不成比例，但无论如何，我所做的就是让它说，留下300px高度并且很棒。（不是最好的，但确定）。

如果有人确实有解决方案，那么请告诉我，因为到目前为止这是唯一的方法，并且由于仅使用一个媒体查询而不是最好的（显然）解决方案。

如何将媒体查询挂钩到屏幕分辨率？

2 个答案: