媒体查询不适用于托管在Github页面上的网站

媒体查询是一种CSS技术，用于根据不同的设备特性（如屏幕尺寸、分辨率、设备类型等）来应用不同的样式规则。它通常用于响应式网页设计，以确保网站在不同设备上都能提供良好的用户体验。

基础概念

媒体查询通过@media规则来实现，可以在CSS文件中定义，也可以在HTML文件的<style>标签内定义。例如：

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

这条规则表示当屏幕宽度小于或等于600像素时，背景颜色会变为浅蓝色。

类型

屏幕尺寸：如max-width、min-width。
分辨率：如resolution。
设备方向：如orientation（portrait或landscape）。
颜色深度：如color。

应用场景

移动优先设计：先为小屏幕设计，再逐步扩展到大屏幕。
桌面端优化：针对高分辨率显示器进行优化。
打印样式：为打印页面设置特定的样式。

常见问题及解决方法

问题：媒体查询不适用于托管在Github页面上的网站

这可能是由于以下几个原因造成的：

缓存问题：浏览器可能缓存了旧的CSS文件。
- 解决方法：清除浏览器缓存或使用无痕模式查看效果。

路径问题：CSS文件的相对路径可能不正确。
- 解决方法：确保CSS文件的路径正确无误。
语法错误：媒体查询的语法可能存在错误。
- 解决方法：检查CSS文件中的媒体查询语法是否正确。
优先级问题：其他CSS规则可能覆盖了媒体查询的规则。
- 解决方法：提高媒体查询规则的优先级，例如使用!important或更具体的选择器。

示例代码

假设你的HTML文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Welcome to My Website</h1>
    <p>This is a responsive website.</p>
  </div>
</body>
</html>

对应的CSS文件styles.css可能如下：

/* 默认样式 */
.container {
  width: 80%;
  margin: 0 auto;
}

/* 媒体查询 */
@media (max-width: 600px) {
  .container {
    width: 95%;
    background-color: lightblue;
  }
}