提问人：Stalkium 提问时间：11/28/2020 更新时间：11/28/2020 访问量：366
CSS 媒体查询和设备解析
CSS Media queries and device resolution
问：
我是一般CSS的新手，特别是响应式设计， 我有一个旧网站，我成功地用CSS重新设计了它，一切都很好，当试图使其响应时，我刚刚发现了媒体查询，我开始使用以下方法重新设计页脚：
@media screen and (max-width:720px){ etc ...}
这工作正常，我的页脚重新设计得很好，我的问题是： 这在我的手机中看起来不错，宽度为 720px，但是对于宽度为 1080px 的手机，它将显示桌面版本？如何避免这种情况？ 我的意思是，如果我尝试：
@media screen and (max-width:1280px){ etc ...}
要包括高分辨率手机，它将在桌面屏幕上显示宽度为 1280px 的移动版本？ 正确的用法是什么？谢谢
答：
0赞
Quentin
11/28/2020
#1
不要担心设备是移动设备或桌面设备或其他设备。
媒体查询允许您根据窗口大小应用不同的样式表。
如果你有一个媒体查询，用于 720px 或更小宽度的设备，并且 CSS 的设计适用于该宽度的屏幕，另一个媒体查询适用于该宽度的设备，并且该设计适用于该尺寸的设备，那么一切都很好。
评论
0赞
Stalkium
11/28/2020
我刚刚在我的设备中尝试过，最大宽度为 720px 没关系，但是如果我旋转到横向，它会显示桌面版本，因为我的横向手机宽度是 1520px，如何避免这种情况？谢谢你的回答
评论