0

私はウェブデザインの初心者で、html と css を使用してページを開発しました。静的ページをレスポンシブに変換して、ブラウザーのサイズを変更するたびに、ウィンドウのサイズに応じてページのスタイルが同じになるようにします。以下は私の体幅と高さです。

body{
    width:100%;
    height:100%;
    margin:0%;
    background-color:white;
}

ブラウザウィンドウのサイズを変更しようとすると、ページのスタイルが変わります.divが互いに崩壊しています。

私のページをレスポンシブに変換するための簡単なヒントを教えてください。

4

4 に答える 4

1 

  body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
  <body>
      <p>If screen size is less than 420px, then it will show lightblue color, or else it will show   light pink color</p>
   </body>

于 2016-09-18T16:09:07.203 に答える
0

アダプティブ レイアウト (レスポンシブ レイアウト) は、次の 3 つの要素で構成されます。

1. 柔軟なレイアウト:

Web ページ レイアウトの作成に使用する div は、相対的な長さの単位で構成する必要があります。これは、CSS で固定幅を使用するのではなく、パーセンテージを使用するべきであることを意味します。

サイズをデザインからパーセンテージに変換する式は、(ターゲット/コンテキスト)x100 = 結果です。

ここに画像の説明を入力

上の写真をデザインの一例として見てみましょう。左側の div のサイズを計算するには、次のように計算します: (300px/960px)x100 = 30.25%

CSS は次のようになります。

.leftDiv
{
    width: 30.25%;
    float: left;
}

.rightDiv
{
    width: 65%;
    float: left;
}

テキストのサイズを自動的に変更するには、VW (ViewWidth) という単位を使用できます。

.myText
{
    font-size: 1vw;
}

これにより、テキストがビューの幅に合わせて自動的にサイズ変更されます。

2.柔軟なメディア:

柔軟なメディアは、親に対して自動的にサイズ変更される画像、ビデオ、キャンバスに適用されます。

例：

img, video, canvass
{
    max-width: 100%;
}

これにより、これらの要素がその親内で自動的にサイズ変更されます。

3. メディア クエリ:

次のステップは、質問で行ったようにメディア クエリを使用することです。これらのメディア クエリは、特定の画面サイズに対して特定の CSS ステートメントを定義します。私は通常、コンピューターの画面、タブレット、電話の画面に対して 3 つのメディア クエリのみを使用します。フレキシブル レイアウトとフレキシブル メディアは、正しく行われた場合に相対的なサイズ変更を保証するため、これ以上のものを用意する必要はありません。

これが役に立つかもしれません: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

出典：こちら

于 2016-03-24T06:29:03.707 に答える