frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

メディアクエリ最大値、最少値の書き方 mixinも

スポンサードリンク


スポンサードリンク


レスポンシブデザインサイトを制作する時、必須の記述メディアクエリ。

こちらを何も見ずに書こうとすると忘れいることがあるので備忘録的に記事にしておこうと思います。

幅1200px以下

@media screen and (max-width: 1200px) {
 
}

max-widthつまり、最大値が1200pxという意味です。

幅480px以上

@media screen and (min-width: 480px) {
    
}

min-widthつまり、最小値が480pxという意味です。

幅480px以上、1200px未満

@media screen and (min-width: 480px) and (max-width: 1200px) {
    
}

mixin

scssのmixinに登録すると便利ですね。
scssで書くときは下記のようにします。

@mixin breakpoint($point){
    @if $point == pc{
        @media screen and (max-width:1400){
            @content;
        }
    }
    @else if $point == tab{
        @media screen and (max-width:960px){
            @content;
        }
    }

    @else if $point == sp{
        @media screen and (max-width:750px){
            @content;
        }
    }
}
@include breakpoint(pc){
/* PCの記述 */
}
@include breakpoint(tab){
/* タブレットの記述 */
}
@include breakpoint(sp){
/* スマホの記述 */
}