Edited at

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

More than 3 years have passed since last update.

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


メディアクエリのメモ

@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