Медиа-запросы игнорируются в ruby ​​на рельсах - PullRequest
Новая
       9

Медиа-запросы игнорируются в ruby ​​на рельсах

0 голосов
/ 27 мая 2018

Я создаю проект в Cloud9 Ruby на рельсах.У меня есть только один CSS-файл в 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;
  }


  }

Если вы перейдете по ссылке: https://todo -app-back-end-prospeed.c9users.io /? _ C9_id = livepreview0 & _c9_host = https://ide.c9.io, вы увидите, что .container2 не покраснел, когда достиг 600px.

1 Ответ

0 голосов
/ 27 мая 2018

Ваш запрос работает нормально.Нужна небольшая настройка при осмотре.Я надеюсь, что вы используете Chrome для проверки поведения.

Если вы выберете рабочий стол, тогда ваш CSS будет работать нормально, иначе это не так.И во время тестирования не забудьте установить DPR на 2,0

enter image description here

Для исправления просто добавьте следующее под тегом <head>.

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

...