Question

@media only screen and (min-width : 1824px) {}

@media only screen and (min-width : 1224px) {}

我正在使用这些媒体查询，这些工作正常，但当我看到我的网站分辨率为1280像素时，它无法正常工作

Answer 1

试试这样：

@media screen and (min-width: 1024px) and and (max-width:1280px)
{
 .....
}

Answer 2

@HMS Designz，如果要访问媒体查询1280到1024分辨率。你可以这样试试。

@media screen and (min-width:1024px) and (max-width:1280px) {}

Answer 3

您不是为1280像素分辨率创建任何媒体查询。首先使用以下媒体查询为该分辨率创建媒体查询。

@media screen and (min-width:1024) and (max-width:1280px)
{

}

Answer 4

@media all and (min-width: 1280px) {
 /* css for width greater than 1280px */
}

@media all and (max-width: 1280px) and (min-width: 1024px) {
 /* css for width between 1280px and 1024px */
}

@media all and (max-width: 1023px) {
 /* css for width less than 1024px */
}

Here是媒体查询的详细解释。

在<head></head>（如果你还没有）中加入

  <meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->

根据您的要求更改@media样式//改变宽度

@media only screen (max-width: 500px) {
 // or as per your needs, as I try to explain below
}

现在我试着解释一下......：）

@media (max-width:500px)

对于要max-width 500px @media screen and (max-width:500px)的窗口，您要应用这些样式。在这种情况下，在大多数情况下，你会谈论比桌面屏幕小的任何东西。

screen

对于具有max-width的设备和500px screen print的窗口应用该样式。除了指定@media only screen and (max-width:500px)而不是other media types最常见的另一个only之外，这几乎与上述相同。

only

以下是来自W3C的quote来解释这一个。

关键字“If”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“仅”开头的媒体查询，就好像“仅”关键字不存在一样。

由于没有“And”这样的媒体类型，旧浏览器应该忽略样式表。

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

Or

这就是媒体查询：逻辑if语句。 “如果”浏览器的这些内容都是正确的，请使用内部的CSS。

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

关键字和。

Not

逗号分开。

@media not all and (max-width: 600px) {
  html { background: red; }
}

从技术上讲，这些被视为分离媒体查询，但这是有效的和或。

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}

使用关键字not来反转逻辑。

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

不做（最大宽度：600px）似乎对我不起作用，因此上面稍微有点时髦的语法。也许有人可以向我解释。请注意，这不仅适用于当前媒体查询，因此如果您以逗号分隔，它只会影响它所在的媒体查询。另请注意，不是整个媒体查询的逻辑，而不是整个媒体查询的逻辑。不是x和y =不是（x和y）≠（不是x）和y

<强>异

要确保一次只有一个媒体查询生效，请使数字（或其他）成为可能。通过这种方式进行心理管理可能更容易。

html { background: red; }

@media (min-width: 600px) {
  html { background: green; }
}

逻辑上这有点像一个switch语句，只是没有一个简单的方法来做“如果这些都不匹配”，就像默认一样。

<强>重写

没有什么能阻止同时存在多个媒体查询。在某些情况下使用它可能更有效，而不是将它们全部排除。

html { background: red; }

@media (max-width: 600px) {
  html { background: green; }
}

媒体查询不会对它们包含的选择器添加任何特异性，但源顺序仍然很重要。以上将有效，因为它们是正确的订购。交换该顺序，在浏览器窗口宽度超过800px时，背景将是红色的，也许是好奇的。

移动优先

您的小屏幕样式位于常规屏幕CSS中，然后随着屏幕变大，您可以覆盖所需的内容。所以，一般来说，最小宽度的媒体查询。

@media 
  only screen and (min-width: 100px),
  not all and (min-width: 100px),
  not print and (min-height: 100px),
  (color),
  (min-height: 100px) and (max-height: 1000px),
  handheld and (orientation: landscape)
{
  html { background: red; }
}

桌面优先

您的大屏幕样式位于常规屏幕CSS中，然后随着屏幕变小，您可以覆盖所需的内容。所以，一般来说，max-width媒体查询。

{{1}}

你可以随心所欲地复杂化。

{{1}}

请注意，唯一的关键字旨在阻止非媒体查询支持浏览器不加载样式表或使用样式。不知道有多么有用/仍然有用。

And for media queries priorites

来源：one two three four five

响应式网页设计：媒体查询不适用于其他屏幕

4 个答案: