-1

ある友人から、レスポンシブ CSS 設計について聞いたことがあります。その利点は、さまざまな解像度の Web サイトを作成する必要がないことです。単一の CSS を作成するだけでうまくいくと彼は言いました。今日、私はインターネットでレスポンシブデザインを検索し、デモを示した記事に出くわしましたが、@mediaウェブサイトでサポートしたい解像度を提供する必要があると書かれており、サンプルページで試してみました。@media query for (max-width:980px)モバイルでは問題なく動作しますが、ラップトップでは動作しません 。

@media query上記の方法では、複数のブラウザーで有効にするために同じ css の異なるバージョンを作成する必要があるため、シングルが利用可能なすべての解像度で機能するように微調整する方法を教えてください。

4

1 に答える 1

1

レスポンシブ デザインを行う最善の方法は、最初にスマートフォンをデザインすることです (モバイル ファーストと呼ばれます)。次に、たとえば、タブレット (約 600px) のメディア クエリを実行してから、デスクトップ (約 960px) のメディア クエリを実行します。

これは、見出しにメディア クエリを使用する方法の非常に基本的な例です。

h1 {
font-size: 12px; /* This is basic, great for smartphones */
}

@media screen and (min-width: 600px) {
    h1 {
    font-size: 16px; /* A little bigger for tablets */
    }
}

@media screen and (min-width: 960px) {
    h1 {
    font-size: 21px; /* A little bigger for desktops */
    }
}

ただし、それだけではありません。必要に応じてメディアクエリを使用して、あらゆる画面サイズに適応できるように、デザインは本質的に流動的である必要があります。これにより、デバイス サイズごとにメディア クエリを作成する必要がなくなります (見栄えも悪くなります)。

列などを作成する場合は、最初は作成しませんが、画面サイズが大きい場合 (600px など) では、ブロック要素をインライン ブロック要素に切り替えます。私は実際には、インライン ブロックを使用するよりもフローティングを好みます。非常に基本的な例を次に示します。

<div class="left">Content</div>
<div class="right">Sidebar</div>

.content, .sidebar {
    width: 100%; /* We don't want to have 2 columns on a small screen * /
}

@media screen and (min-width: 600px) {
    .content {
    float: left; /* Now on bigger screens, we can align it into columns */
    width: 80%; / *set the with on your content */
    }
    .sidebar {
    float: left; /* Now on bigger screens, we can align it into columns */
    width: 20%; /* set the width of the sidebar */
    }
}

不要なロゴがデスクトップでは見栄えがよくても、必要のないもので、小さな画面ではレイアウトが乱れる場合があります。でこれを解決しdisplay: noneます。以下は非常に基本的な例です。

. unnecessary-logo {
    display: none; /* We want to hide it on small screens */
}
@media screen and (min-width: 600px) {
    . unnecessary-logo {
    display: block; /* We want to show it on bigger screens */
    }
}

レスポンシブ デザインにはそれ以上の方法がありますが、うまくいけば、私はあなたの質問に答えました。この情報は、あなたが始めるのに十分です.

このビデオをご覧ください: http://www.youtube.com/watch?v=-BVmrSG93XE

于 2013-05-11T19:12:25.830 に答える