CSS 媒体查询和设备解析

Question

我对一般的 CSS 和响应式设计特别陌生， 我有一个旧网站，我用 CSS 成功地重新设计了它，一切都很好，当我试图让它响应时，我刚刚发现了媒体查询，我开始使用重新设计页脚：

@media screen and (max-width:720px){ etc ...}

这没问题，我的页脚重新设计得很好，我的问题是： 这在我的 720 像素宽度的手机中看起来不错，但对于宽度为 1080 像素的手机，它会显示桌面版本吗？如何避免？ 我的意思是，如果我尝试：

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

要包括高分辨率手机，它将在桌面屏幕上显示 1280 像素宽度的手机版本？ 正确的用法是什么，？谢谢

Answer 1

不用担心设备是移动设备还是桌面设备等等。

媒体查询允许您根据窗口大小应用不同的样式表。

如果您有一个针对 720 像素或以下宽的设备的媒体查询，并且该 CSS 中的设计适用于该宽的屏幕，而 另一个 媒体查询针对的是更宽的设备，并且该设计适用于这种尺寸的设备，那么一切都很好。