レスポンシブ メディアクエリ

そのままコピペで使える用にメモ。

メディアクエリのメモ

@media screen and (min-width:480px) { 
/*　画面サイズが480pxからはここを読み込む　*/
}
@media screen and (min-width:768px) and ( max-width:1024px) {
/*　画面サイズが768pxから1024pxまではここを読み込む　*/
}
@media screen and (min-width:1024px) {
/*　画面サイズが1024pxからはここを読み込む　*/

sassの@mixin用

@mixin mediaSP {
  @media screen and (min-width:480px) and (max-width:$break-pointSP) {
    @content
  }
}

@mixin mediaT {
  @media screen and (min-width:$break-pointSP) and (max-width:$break-pointPC) {
    @content
  }
}

@mixin mediaPC {
  @media screen and (min-width:$break-pointPC) {
    @content
  }
}

参考:http://qiita.com/kyaido/items/828906ffa7198e99d0b7