レスポンシブデザイン

現在、ポートフォリオのレスポンシブデザインを実装しており、その実装で学んだことをアウトプットしていきたいと思います。

レスポンシブデザインの記事で下記のものを参考にさせていただきました。 Sassで簡単にメディアクエリを使用する方法

$pc: （デバイスの横幅）px;

@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}

という形で、定義しておいて

レスポンシブデザインを適用させたいクラス名{
@include pc {
 　width: ~px;
  };
}

とすることによって、定義したpcの数値よりも値が大きい場合に widthが適用されます。 $pc以外にも、$tbや、$spなど（変数の命名は自由で）を指定していくことで、環境毎でwidthが適用できるようになりました。

今回は以上になります。