个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 13:20:26 24 4
gpt4 key购买 nike

我无法弄清楚这个问题。我搜索了很多，之后。我在这里寻求帮助，所以请大家帮助我。以下是我使用的 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) { }

帮我找出问题所在。

最佳答案 

@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 之外，这几乎与上述相同而不是 other media types最常见的另一个是 print .

@media only screen and (max-width:500px)

这是一个quote直接来自 W3C 来解释这一点。

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

由于不存在“only”这样的媒体类型，旧版浏览器应忽略样式表。


我尝试在此处提供更多信息，这些信息是从网络上收集的。

If

这就是媒体查询:逻辑 if 语句。 “如果”这些关于浏览器的事情是真的，请使用里面的 CSS。

And

关键字and。

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

Or

逗号分隔。

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

从技术上讲，这些被视为分隔媒体查询，但实际上是 and or。

Not

用关键字 not 反转逻辑。

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

只是不做 (max-width: 600px) 似乎对我不起作用，因此上面的语法有点古怪。也许有人可以向我解释。请注意，这不仅适用于当前媒体查询，所以如果您使用逗号分隔，它只会影响它所在的​​媒体查询。另请注意，not 将整个媒体查询的逻辑作为一个整体反转，而不是它的各个部分。 not x and y = not (x and y) ≠ (not x) and y

独家

为确保同一时间只有一个媒体查询有效，请使数字(或其他)成为可能。以这种方式在心理上管理它们可能更容易。

@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; }
}

从逻辑上讲，这有点像一个 switch 语句，只是没有像默认那样使用简单的方法来执行“如果这些都不匹配则执行此操作”。

覆盖

没有什么能阻止多个媒体查询同时为真。在某些情况下使用它可能比将它们全部设置为独占更有效。

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

媒体查询不会为它们包含的选择器添加特殊性，但源顺序仍然很重要。以上将起作用，因为它们的顺序正确。交换该顺序，在浏览器窗口宽度超过 800 像素时，背景将是红色的，也许是出于好奇。

移动优先

您的小屏幕样式位于常规屏幕 CSS 中，然后随着屏幕变大，您可以覆盖您需要的样式。因此，通常是最小宽度媒体查询。

html { background: red; }

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

桌面优先

您的大屏幕样式位于常规屏幕 CSS 中，然后随着屏幕变小，您可以覆盖您需要的样式。因此，通常是最大宽度媒体查询。

html { background: red; }

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

您可以根据需要将其复杂化。

@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; }
}

请注意 only 关键字旨在防止不支持媒体查询的浏览器不加载样式表或使用样式。不确定曾经/现在有多有用。

And for media queries priorites

来源:one two three four five

关于html - 网站响应在 Firefox 中显示良好但在移动设备中不显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24107706/

24 4 0
文章推荐： java - Amazon Web 服务可以用于 webdriver 功能测试吗？
文章推荐： c++ - 允许用户命名文件名但将其保存在预定位置 - OSX
文章推荐： java - 降序ListNode迭代器实现
文章推荐： c++ - 从 QCustomPlot 派生的类的构造函数
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com