使用 @Media 和 Min-Width 和 Max-Width
在 CSS 上下文中，@media 查询允许您定位特定屏幕尺寸或具有不同风格的设备。然而，设置媒体查询以在各种设备和浏览器上一致地工作可能具有挑战性。
在您的例子中，您定义了三个 @media 规则：
@media screen and (min-width: 769px) {...}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {...}
@media only screen and (max-device-width: 480px) {...}虽然此设置有效在 iPhone 上，尚不清楚为什么它不能在浏览器中运行。一个潜在的问题是您在元标记中使用“device”，并在第三条规则中使用“max-width”而不是“max-device-width”。
但是，建议的方法是定义不支持 @media 查询的旧版浏览器的默认 CSS 样式。然后，使用 @media 规则来针对特定的屏幕尺寸或具有其他样式的设备。例如：
/* Default styles for older browsers */
body {
font-size: 14px;
}
/* Styles for screens wider than 960px */
@media only screen and (min-width: 960px) {
body {
font-size: 16px;
}
}
/* Styles for mobile browsers narrower than 480px */
@media only screen and (max-device-width: 480px) {
body {
font-size: 12px;
}
}通过遵循此方法，您可以确保与更广泛的设备和浏览器的兼容性。
以上是如何使用带有'min-width”和'max-width”的'@media”查询来实现一致的跨浏览器样式？的详细内容。更多信息请关注PHP中文网其他相关文章！
