Written by Manabu Bannai

PC・スマホ・タブレットに合わせてCSSを振り分ける『Media Queries』のテンプレ【レスポンシブサイト用】

CSS PROGRAMMING


レスポンシブサイト向けの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} {}

人気記事:Web制作の独学方法をガッツリまとめました。

» 【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

おすすめ:Webで稼ぎたいなら、Webマーケティングを学びましょう。ノウハウまとめました。

» 【超初心者向け】Web集客の基礎から応用までガッツリまとめました。