html - Css 媒体查询解析问题

Question

我想知道如何使用 CSS 媒体查询来检测屏幕分辨率并在屏幕分辨率低于 1024x768 时进行不同的页面加载？我还需要知道是否可以将此查询放在我的 master.css 脚本中？或者需要放在哪里？

站点地图（不包括 Java）

• Index.html （主页）
• About.html （关于页面）
• 缺少.html (404)
• Small.html （我要加载的较小版本）
• ie8.css （Internet Explorer 8 的条件 CSS）
• Master.css（主样式表）

Answer 1

您可以通过各种方式根据浏览器视口的宽度为页面提供不同的样式，例如：

@media only screen and (max-width: 1024px) {
  your styles here
}

您可以将它放在样式表中的任何位置。

但是请注意，您不能使用这样的媒体查询来加载不同的页面。为此，您需要某种设备检测脚本。