Media Query

ブラウザ画面サイズによってデザインを切り替える


/*===============================================================
 ■ breakpoint
===============================================================*/

/* [Mobile+Tablet ------------- ]*/
@media screen and (max-width: 430px) {
	}
@media screen and (max-width: 539px) {
	}
@media screen and (min-width: 540px) and (max-width: 600px) {
	}

/* [Small PC+Tablet ------------- ]*/
@media screen and (max-width: 1024px) {
	}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	}

/* [PC --------------------------- ]*/
@media screen and (min-width: 1025px) {
	}
@media screen and (min-width: 1366px) {
	}


and 区切り すべての条件を満たす
    @media screen and (min-height: 600px) and (min-width: 300px) {}

カンマ区切り  どれかの条件を満たす
    @media screen and (min-height: 600px) and (min-width: 300px), screen and (min-width: 400px), print  {}

縦長か横長かで振り分ける
    @media screen and (orientation: landscape) {}
    @media screen and (orientation: portrait) {}

       //Retina (Webkit系は resolution (dpi , dpcm , dppx)をサポートしていないため併用)
         @media
           (-webkit-min-device-pixel-ratio: 2),
           (min-resolution: 2dppx){}  /*dppx  …dot Per Pixel */

iPadサイズ（縦用）
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}
iPadサイズ（横用）
    @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {}

TOP