フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

超簡単スマホ・PCでの表示切り替え

今回はスマートフォンとデスクトップ(PC)でのサイトの見え方を変える方法をご紹介します。
俗に言う”レスポンシブサイト”なんかもこのやり方でやってるらしいです。

注意事項
・cssをリセットするため、"reset.css"というファイル名でcssをリセットしています。
・視覚的にわかりやすくするため、要素に背景色をつけてます。
・htmlの記述は基本的にbodyの中を記述していきます。

では早速

今日のデモページはこちらです。
_Users_kei_Desktop_test_test.html.png

このページをでデスクトップで見た時(ブラウザのwidthが1000pxを超えた時)に、contentクラスの中身をwidth:600px;にしようと思います。

こんな感じに
_Users_kei_Desktop_test_test.html (1).png

1.htmlのheaderにviewportを設定

test.html
<head>
    <meta name="viewport" content="width=device-width">
</head>

このコードを1行追加することで、サイトがブラウザの幅を理解できるようになるらしいですね。

2.cssにmediaクエリを設定

test.css
@media screen and (min-width:1000px) {
    .content {
        width:  600px;
        margin: auto;
    }
}

min-width:1000pxで1000px以上の時って意味です。
ちなみに
max-width:1000pxだと1000px以下になります。

[紹介元] CSSタグが付けられた新着投稿 – Qiita 超簡単スマホ・PCでの表示切り替え

コメント

記事に戻る

コメントを残す