为什么我的媒体查询不能在浏览器上运行，但可以在移动设备上运行？

媒体查询：为特定设备分辨率定制样式

@media min-width 和 max-width 属性提供对基于样式的精细控制关于设备分辨率。但是，使用此设置时会出现一个常见问题：它可以在移动设备上运行，但不能在浏览器中运行。

问题原因

问题源于存在指定视口宽度和用户可伸缩性的元标记。通过使用此元标记，您可以有效地覆盖设备的默认设置。因此，基于设备尺寸的 @media 规则变得不准确。

解决方案：重新排序样式

解决方案是重新排列 CSS，以优先考虑较旧浏览器的默认样式不支持@media。然后，使用@media规则为不同的设备分辨率应用特定的样式。以下是推荐的方法：

/* Default styles for older browsers */
body {
  font-size: 16px;
}

/* Styles for larger browsers (>= 960px) */
@media only screen and (min-width: 960px) {
  body {
    font-size: 18px;
  }
}

/* Styles for iPhone-sized devices (<= 480px) */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 14px;
  }
}

其他注意事项

• iPad 屏幕通常比 iPhone 更大，因此您可能需要为它们单独设置 @media 规则。
• 您可以使用 @media print{} 属性来指定可打印版本的样式内容。
• 始终在各种设备和浏览器上彻底测试您的样式，以确保它们正确呈现。

以上是为什么我的媒体查询不能在浏览器上运行，但可以在移动设备上运行？的详细内容。更多信息请关注PHP中文网其他相关文章！