Question

我无法弄清楚这个问题。我搜索了很多，之后。我在这里寻求帮助所以请各位帮助我。以下是我使用的HTML：

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,          user-scalable=0">

这些是媒体查询

     @media all and (max-width: 1400px) { }
     @media all and (max-width: 1024px) { }
     @media only screen and (max-width: 768px) { }
     @media only screen and (max-width: 480px) { }
     @media only screen and (max-width: 320px) { }

帮助我找出问题所在。

Answer 1

@media all and (min-width: 1400px) {
}

@media all and (max-width: 1399px) and (min-width: 1024px) {
}

@media all and (max-width: 1023px) and (min-width: 768px) {
}

@media all and (max-width: 767px) and (min-width: 480px) {
}

@media all and (max-width: 479px) and (min-width: 320px) {
}

@media all and (max-width: 319px) {
}

这在<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

Answer 2

如果您尚未为不同的媒体定义css属性，您希望浏览器如何呈现它？

您需要例如：

   @media only screen and (max-width: 480px) { 
   #header
     {
     width:100%
     background:red;
      }


    }

网站响应在Firefox中显示良好但在移动设备中不显示？

2 个答案: