画面サイズの話

画面サイズを整える話。

今開発フェーズとしては画面設計ですが、一応画面サイズを整えておきます。
※まだおおざっぱな段階

まず、PC用、タブレット用、スマホ用にCSSを分けます。
以下のCSSで画面サイズで判定させます。

@import url(pc.css) screen and (min-width: 769px);   /* PC */
@import url(tablet.css) screen and (max-width: 768px);  /* タブレット */
@import url(smart.css) screen and (max-width: 480px);   /* スマホ */
 ||<

これでCSSがそれぞれ分かれたのでそれぞれ画面サイズを記載していきます。

PCは幅80%で
>|css|
#main { 
    width : 80% ;
    margin-right: auto;
    margin-left : auto;
}
 ||<

タブレット、スマホはフルサイズにします。
>|css|
#main { 
    width : 100% ;
    margin-right: auto;
    margin-left : auto;
}