CSSメディアクエリ メモ

application.css

...
...
@media screen and (min-width:480px) { 
    .aaa{
        color: red;
    }
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    .aaa{
        color: blue;
    }
}
@media screen and (min-width:1024px) {
    .aaa{
        display: none; /*見せない*/
        visibility: hidden; /*divは存在すけど表示なし*/
    }
}

view/home/top.html.erb

....
<div class="aaa">ここがレスポンシブ対象</div>
....