PC・スマホ・タブレットに合わせてCSSを振り分ける『Media Queries』のテンプレ【レスポンシブサイト用】
レスポンシブサイト向けのMudia Queriesのまとめです。
CSSに貼付けるだけで利用できますので、テンプレ的にご利用どうぞ。
PC用のMedia Queries
/*----------------------------------------------------------*/
/* PC用のCSS */
/*----------------------------------------------------------*/
@media only screen and (min-width: 1200px) {}
タブレット用のMedia Queries
/*----------------------------------------------------------*/
/* タブレット用のCSS */
/*----------------------------------------------------------*/
@media only screen and (min-width:479px) and (max-width:768px) {}
スマホ用のMedia Queries
/*----------------------------------------------------------*/
/* スマホ用のCSS */
/*----------------------------------------------------------*/
@media only screen and (max-width: 479px) {}
SCSSを使う場合
$pc: "only screen and (min-width: 1200px)";
$tablet: "only screen and (min-width:479px) and (max-width:768px)";
$smartphone: "only screen and (max-width:479px)";
// 使い方
@media #{$smartphone} {}