LoginSignup
10

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-07-29

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

メディアクエリのメモ

@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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10