1.把代碼粘貼在theme.scss文件夾中

$phone:            "screen and (max-width: 640px)";
$tablet:           "screen and (min-width: 641px) and (max-width: 1007px)";
$tablet-and-up:    "screen and (min-width: 641px)";
$pocket:           "screen and (max-width: 1007px)";
$lap:              "screen and (min-width: 1008px) and (max-width: 1239px)";
$lap-and-up:       "screen and (min-width: 1008px)";
$desk:             "screen and (min-width: 1240px)";
$widescreen:       "screen and (min-width: 1500px)";

手機端

@media #{$phone} {
  .hidden-phone {
    display: none !important;
  }

  .\31\/2--phone, .\32\/4--phone, .\36\/12--phone {
    width: 50%;
  }

  .\31\/3--phone, .\34\/12--phone {
    width: 33.33333%;
  }

  .\32\/3--phone, .\38\/12--phone {
    width: 66.66667%;
  }

  .\31\/4--phone, .\33\/12--phone {
    width: 25%;
  }

  .\33\/4--phone, .\39\/12--phone {
    width: 75%;
  }

  .\31\/12--phone {
    width: 8.33333%;
  }

  .\32\/12--phone {
    width: 16.66667%;
  }

  .\35\/12--phone {
    width: 41.66667%;
  }

  .\37\/12--phone {
    width: 58.33333%;
  }

  .\31\30\/12--phone {
    width: 83.33333%;
  }

  .\31\31\/12--phone {
    width: 91.66667%;
  }
}

平板及以上端

@media #{$tablet-and-up} {
  .hidden-tablet-and-up {
    display: none !important;
  }

  .\31\/2--tablet-and-up, .\32\/4--tablet-and-up, .\36\/12--tablet-and-up {
    width: 50%;
  }

  .\31\/3--tablet-and-up, .\34\/12--tablet-and-up {
    width: 33.33333%;
  }

  .\32\/3--tablet-and-up, .\38\/12--tablet-and-up {
    width: 66.66667%;
  }

  .\31\/4--tablet-and-up, .\33\/12--tablet-and-up {
    width: 25%;
  }

  .\33\/4--tablet-and-up, .\39\/12--tablet-and-up {
    width: 75%;
  }

  .\31\/12--tablet-and-up {
    width: 8.33333%;
  }

  .\32\/12--tablet-and-up {
    width: 16.66667%;
  }

  .\35\/12--tablet-and-up {
    width: 41.66667%;
  }

  .\37\/12--tablet-and-up {
    width: 58.33333%;
  }

  .\31\30\/12--tablet-and-up {
    width: 83.33333%;
  }

  .\31\31\/12--tablet-and-up {
    width: 91.66667%;
  }
}

記錄關鍵部分，其余的闸盔，都知道怎么弄