CSSでPCとスマートフォンの表示を切り分けたい、デバイスサイズで切り分ける
そんな時は、
/*768px以上の表示*/
@media screen and (min-width:768px){
PC用のセレクタ・プロパティを記述
}
/*767px以下の表示*/
@media screen and (max-width:767px){
スマートフォン用のセレクタ・プロパティを記述
}
と記述しますよね。
どこで切り分けるかはお好みだと思いますが、Y田はiPadを縦にして見たときのサイズ（768px × 1024px）を基準にすることが多いです。
あれ？スマホでもPC表示のままじゃん…
ってことがたまにあるんですよね。
で、そういう時はほぼ100％、
<meta name="viewport" content="width=device-width,initial-scale=1.0">↑このmetaタグのviewportの記述を忘れてるのです。
まぁ凡ミスというか。
会社で制作するときはテンプレートというか以前制作したものをお借りするのでそんなこともないんですけどね。
よく確認しましょうね、ってお話でした。
