fablet()
tablet()
desktop()
wide()
iphone5-only()
mobile-only()
fablet-only()
tablet-only()
desktop-only()
mobile-fablet()
mobile-tablet()
mobile-desktop()
landscape()
landscape-all()
portrait()
portrait-all()
chrome()
firefox()
edge()
ie()
theme-trigger-media($theme-id)
theme-trigger-attr($theme-attr)
Media Query
Table of Contents
Detail
メディアクエリの Mixin。変数 Breakpoint をメインで利用します。
Example
モバイルファースト設計なので、例えば tablet() を使うとタブレット以上のウインドウサイズで適応される CSS となります。
// Tablet以上で非表示にしたい
.is-tablet-none {
@include tablet() {
display: none;
}
}
// iPhone5やSEだけ小さくしたい
.is-iphone5-xxs {
@include iphone5-only() {
font-size: 75%;
}
}