рельсы, где можно добавить теги @media css?

Прямо сейчас у меня в layout.html.erb некоторые правила CSS с @mediaрельсы, где можно добавить теги @media css?

<style> 
@media (max-width: 900px) { 
    .green-button{ 
     display: none!important; 
    } 
    .chat_button{ 
     margin-top: 20px!important; 
    } 
    #myCarousel{ 
     height:800px!important; 
    } 
</style>

Я хочу, чтобы избавиться от них, и поместить их в файл CSS. В моей папке css я создал файл mobile.css и разместил там этот код. Но это не сработает. Как это исправить?

источник

2016-02-04 user2950593

попробовать поместить свой код в 'application.css' это работает? –

В Rails важно, чтобы сохранить ваш CSS в порядке.

У вас должен быть один главный файл app/assets/stylesheets/application.css, в котором вы можете перечислить все файлы css для импорта в ваше приложение.

Так что, если у вас есть app/assets/stylesheets/mobile.css файл, содержание application.css будет:

/* 
*= require mobile 
*/

затем, на вашей странице, вы должны включить в <head> TAGS следующее:

<%= stylesheet_link_tag 'application', media: 'all' %>

Пожалуйста, изучите следующее, чтобы лучше понять Rails Assets Pipeline:

http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

Несколько предложений:

вы смешиваете верблюжьи и тир в вашем CSS: избежать этого.
Вы назначаете стили id: избегайте этого.
Вы используете !important слишком часто: избегайте этого.

Используйте только классы для определения css и не используйте camelCase, но только - (тире).Избегайте !important, если можете. Посмотрите руководство по стилю css, если у вас есть время.

В качестве следующего шага я также предлагаю вам перейти к scss. переименовывать mobile.css в mobile.scss и реорганизовать его так:

$breakpoint: 900px; 
@media (max-width: $breakpoint) { 

    .green-button { 
    display: none !important; 
    } 

    .chat_button{ 
    margin-top: 20px !important; 
    } 

    #myCarousel { 
    height:800px !important; 
    }

источник

2016-02-04 10:23:50 coorasse

Кажется, что работает, когда я добавляю * = require mobile в конце моей папки 'application.css'. И спасибо за предложения для впечатлений – user2950593

Поместите их в application.css:

#app/assets/stylesheets/application.css 
@media (max-width: 900px) { 
    .green-button { display: none; } 
    .chat_button { margin-top: 20px; } 
    #myCarousel { height:800px; } 
}

Я создал файл mobile.css

Вы действительно не нужен отдельный "мобильный" таблицы стилей, если вы используете @media запросов.

@media вопросов изменить стиль вашего HTML на основе размера видового экрана. В то время как мобильные телефоны/планшеты могут изменять размер окна просмотра, они обычно не требуют полностью отдельной структуры CSS.

Старая потребность в «мобильной» таблице стилей родилась из-за того, что мобильный телефон pre-iPhone был в лучшем случае базовым. Теперь у нас есть полная рендеринг HTML на телефонах, вам просто нужно изменить, насколько большой/видимый каждый элемент.

Rails - по умолчанию - умоляет использовать application.css в вашем layout, который должен включать в себя @media запросы:

#app/views/layouts/application.css 
<%= stylesheet_link_tag :application %>

источник

2016-02-04 10:19:20

Кто бы ни подавил, я призываю вас опровергнуть то, что я написал. Все правильно. –

Использование application.css для определения стилей - первый шаг к плохому упорядочению ваших файлов css. Application.css следует использовать только для определения списка файлов для включения. – coorasse

Конечно. Я понял вопрос, чтобы задать вопрос о добавлении дополнительной таблицы стилей, к которой я рекомендовал включить код в 'application.css'. Все еще ничего не мешает вам ставить стиль в 'application.css', особенно если приложение мало. –

рельсы, где можно добавить теги @media css?

ответ

Смежные вопросы