Question

我正在使用Cloud9 Ruby on rails创建一个项目。我在index.html.erb中只有一个css文件：

<!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;
  }


  }

如果您访问以下链接：https://todo-app-back-end-prospeed.c9users.io/?_c9_id=livepreview0&_c9_host=https://ide.c9.io，当.container2达到600px时，您会看到topicId没有变红。

Answer 1

您的查询工作正常。在检查时需要一些调整。我希望您使用Chrome来检查行为。

如果您选择桌面，那么您的CSS将正常工作，否则它不会。而测试时不要忘记将DPR设置为2.0

要修复，只需在<head>代码下添加以下内容。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

在rails

1 个答案: