Css媒体查询解决问题

Question

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

站点地图（不含Java）

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

Answer 1

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

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

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

请注意，您无法使用此类媒体查询加载其他页面。为此，您需要某种设备检测脚本。