Zenigame

Overview

Media Queryに関係するMixinは3つあります。

phone、tablet、pcの3つのタイプから選んでmedia-queryを指定します。それぞれブレイクポイントはconfigで設定している変数で指定されています。

@include media(type);

表 media Mixinのarguments
Arguments	Default Value	Input	Required
type		phone/tablet/pc	Required

min-widthを指定してmedia-queryを指定します。指定した横幅よりもウインドウサイズが大きい場合にスタイルが適用されます。

@include min-screen(width);

表 min-screen Mixinのarguments
Arguments	Default Value	Required
width		Required

max-widthを指定してmedia-queryを指定します。指定した横幅よりもウインドウサイズが小さい場合にスタイルが適用されます。

@include max-screen(width);

表 max-screen Mixinのarguments
Arguments	Default Value	Required
width		Required