Ruby on Rails中Media queries（媒体查询）失效问题求助

嘿，我来帮你梳理下这个问题——这种媒体查询没触发的情况我之前也碰到过几次，咱们一步步来排查：

1. 先简化媒体查询条件，排除像素比限制 #

你的媒体查询里加了(-webkit-device-pixel-ratio: 2)，这个条件只会匹配Retina这类高DPI屏幕。如果你的测试设备不是高DPI屏，或者浏览器模拟时没开启对应模式，这个条件就会导致整个媒体查询不生效。

可以先把这个条件去掉，改成：

@media only screen and (min-width: 290px) and (max-width: 640px) { 
  /* 你的样式 */
}

测试下窗口宽度在600px时是否会触发红色背景，如果生效了，再根据需求决定要不要保留像素比的限制（如果要保留，记得在测试时开启浏览器的高DPI模拟）。

2. 确认CSS文件是否正确加载 #

打开浏览器开发者工具（按F12），切换到「网络」标签，刷新页面，找到application.css文件，检查它的状态码是不是200（成功加载）。如果是404，说明Rails的asset pipeline可能没正确编译，试试重启Cloud9上的Rails服务器，或者在开发环境下运行rails assets:precompile（不过开发环境一般会实时编译，重启服务器更直接）。

3. 检查元素样式的优先级冲突 #

在开发者工具的「元素」标签里找到.container2元素，查看右侧的「样式」面板：

• 如果你的媒体查询样式被划掉了，说明有更高优先级的样式（比如行内样式、更具体的选择器）覆盖了它。可以临时加个!important测试（比如background-color: red !important;），如果生效了，就需要优化你的选择器特异性，或者调整样式加载顺序。
• 如果根本看不到这个媒体查询的样式，说明CSS没被正确读取，回到第二步排查。

4. 确认窗口可视宽度是否真的达标 #

有时候浏览器的工具栏、侧边栏会占用空间，导致实际可视宽度小于你看到的窗口宽度。可以用开发者工具的「响应式设计模式」（顶部的手机图标），直接设置宽度为600px，强制触发媒体查询条件，看看样式是否生效。

附你提供的代码参考 #

index.html.erb代码：

<!DOCTYPE html> 
<html> 
<head> 
<title>Workspace</title> 
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
<%= csrf_meta_tags %> 
</head> 
<body> 
<%= yield %> 
</body> 
</html>

application.css媒体查询代码：

@media only screen and (min-width: 290px) and (max-width: 640px) and (-webkit-device-pixel-ratio: 2) { 
  .container2 { 
    position:relative; 
    background-color:red; 
    text-align: center; 
    width:100%; 
    height:100%; 
    border-bottom-style: ridge; 
    border-top-style: ridge; 
    border-width:10px; 
  } 
  #list { 
    font-size: 50px; 
  } 
}

内容的提问来源于stack exchange，提问作者Prospeed orginal