我设置的media query未按预期生效，.container类样式无法触发怎么办

• 选择器不匹配
  你贴出的普通样式的选择器写的是container，这是HTML标签选择器，仅会匹配<container>自定义标签；而媒体查询内用的是.container类选择器，二者匹配的元素完全不同。如果你的元素是用class="container"定义的，要先把普通样式的选择器修正为.container。
• 缺少viewport元标签
  如果是在移动端测试，或者浏览器缩放后不触发，大概率是HTML的<head>中没有加视口配置标签，浏览器会用设备物理像素计算宽度而非逻辑像素，导致阈值判断错误。需要在head中加入以下代码：
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
• CSS优先级/顺序错误
  CSS遵循后写的样式覆盖前序样式的规则，如果你的媒体查询代码写在了普通.container样式的前面，就算媒体查询触发，样式也会被后面的普通样式覆盖。必须保证媒体查询代码放在同优先级普通样式的后面。
  另外如果其他地方有更高优先级的.container样式（比如嵌套了父选择器、加了!important标记），也会覆盖媒体查询内的样式，可以打开浏览器开发者工具的元素样式面板，查看媒体查询的样式是否被划掉，确认是否是优先级问题。
• 样式差异太小无法感知
  你当前媒体查询内除了background: none之外，其他所有属性和普通样式完全一致，如果背景本身因为路径错误没加载出来，或者其他地方又给元素加了背景样式，你可能无法感知到媒体查询已经触发。可以临时加一个border: 2px solid red的属性到媒体查询的.container样式里，快速验证是否触发。

修复后完整CSS代码如下：

/* 修正选择器，加.代表类选择器 */
.container {
  background: url(imaggg/astronaut2.png);
  background-position: center;
  background-size: 90px;
  background-repeat: no-repeat;
  padding: 2.3% 12.5%;
  width: 29%;
  height: 17%;
}

/* 媒体查询放在普通样式后面 */
@media (max-width: 800px) {
  .container {
    background: none;
    background-position: center;
    background-size: 90px;
    background-repeat: no-repeat;
    padding: 2.3% 12.5%;
    width: 29%;
    height: 17%;
  }
}

内容的提问来源于stack exchange，提问作者anuj tanwar