使っているデバイスによってbackground-sizeを変えたい


**やりたいこと**  
作っているアプリ内で，background-sizeがいまいちいい感じに決まりません．そこで，”pcならcontain,
それ以外ならcover”みたいなことをやりたいです．

**コード例**  
**pages.scss**

[code]

      .top-main {
      padding: 200px 0 200px;
      text-align: center;
      position: absolute;
      top: 0;
      width: 100%;
      height: auto;
      min-height: 100%;
      /*background-image: image-url('app/assets/images/canva.jpg'); */
      background-image: url('zero-home.jpg');
      background-size: contain;
      background-repeat: no-repeat;
    
[/code]

こんな感じで今は書いているのですが，この `”background-size: contain; background-repeat: no-
repeat;”` をどうにかしてサイズに応じてcoverに変えたり出来たらいいなと思っています．

**追記分**  
**pages.scss** （トップページのscssです）

[code]

    @media (max-width: 575.98px) {
      .top-main {
        background-image: url('zero-home.jpg');
        background-size: cover;
      }
      .devise {
        background-image: url('zero-home.jpg');
        background-size: cover;
      }
    }
    
    @media (min-width: 560px) {
      .top-main {
        background-image: url('zero-home.jpg');
        background-size: contain;
      }
      .devise {
        background-image: url('zero-home.jpg');
        background-size: contain;
      }
    }
    
[/code]




メディアクエリを使ってブラウザーのビューポートの幅で切り替えるのが一般的です。

たとえばスマートフォン用の指定は下記を追加します

[code]

    @media (max-width: 575.98px) {
      .top-main {
        background-size: cover;
      }
    }
    
[/code]

