web-dev-qa-db-ja.com

DIV要素をレスポンシブにする方法

そのため、私の小さなWebサイトには、CSSでスタイリングしたdivがあり、さまざまな解像度でテストしているときに、27インチの画面と比較して11インチの小さな画面ではボックスが歪んで見えました。 700ピクセルの高さ200ピクセルの幅のdivをすべてのモニターサイズで同じサイズにするにはどうすればよいですか

ありがとう

ここIS DIVのCSS：

text-align:center; 
border:3px solid black; 
padding-bottom:10px; 
height:700px; width:200px; 
background-color: white; margin-right: 2cm; 
margin-top: -19cm; 
margin-left: auto;
htmlcssstyling
5
user2451511

幅を識別するためのメタタグと、幅が異なる場合にアクションを実行するためのメディアクエリを追加する必要があります。ピクセルではなくcss要素にパーセンテージを追加することも非常に役立ちます。

HTMLコード：

<!doctype html>
    <meta name="viewport" content="width=device-width"/>

ページがデバイスの幅を識別できるようにメタタグを追加します。 Mozillaのこれに対する見解 を参照してください。

この例では、<p>タグと背景の4つの異なるデバイス幅のクエリが適用されます。

<body>
    <h1>Media Queries Examples</h1>
    <p>Increase or decrease the size of your window to see the background color change</p>
</body>

CSSコード：

p {
  font-family: arial,san-serif;   
  font-size: 13px;
  font-color: black;
}

h1 {
  font-size:30px;   
}

@media screen and (min-width:761px) {
  body {
    background-color:white;
  }
  h1 {
    color:red;
  }    
}

@media screen and (max-width:760px) {
  body {
    background-color: #333;
  }
  h1 {
    color:red;
  }  
  p {
    color: white;
  }
}

@media screen and (max-width:480px) {
  body {
    background-color: #807f83;
  }
  h1 {
    color:white;
  }  
  p {
    color: white;
  }
}

@media screen and (max-width:360px) {
  body {
    background-color: #0096d6;
  }
  h1 {
    color:white;
    font-size:25px;
  }  
  p {
    color: white;
  }
}

したがって、css内で@media Screenを使用すると、画面のクエリが呼び出されます。デバイスの幅がそのクエリの範囲内に達すると、すべてのメディアデバイスに@Media allを使用できます（詳細を参照）。その後、cssが問題の要素に適用されます。 現在の例 を参照してください。 JSFiddleウィンドウでボックスをドラッグすると、クエリが満たされると、背景の色と書き込みの色が変更されます。同じロジックを電話、タブレット、テレビ、デスクトップに適用できます。 標準デバイスのメディアクエリ-CSSトリック

この例は、JSFiddleの匿名ユーザーによって提供されました。問題のデバイスに対応して要素のスタイルを設定するために必要なものの明確な例を提供します。私は信用しません。

さらに読む
- Microsoft-メディアクエリ
- @ Media Rule --W3C
レスポンシブWebデザインWiki

4
BIW

あなたはあなたのウェブサイトをレスポンシブにする必要があります、それをするために私たちは メディアクエリ と呼ばれるものを使用しますこれは基本的にあなたの余分なマークアップですcss構文。

レスポンシブデザインを始めたばかりなので、使用するのに最適なフレームワークは Bootstrap を使用することです。これは、簡単にカスタマイズできます。プロジェクトのニーズ。

これは、流体グリッドシステムがサイトにどのように組み込まれているかについての理解を深めるのにも役立ちます。

お役に立てれば！

2
Jordan

ジョーダンが言ったことに加えて。これは、メディアクエリと応答性について学ぶのに最適な場所です： https://www.udacity.com/course/mobile-web-development--cs256

2
dakoto

DIVをレスポンシブにする方法はたくさんあります。最も簡単な方法は、bootstrapのようなフレームワークを使用してすべての作業を行うことです。

もう1つの方法は、@media('max-width: 1024px'){//code...}を使用することです。この方法で、必要な各画面解像度で何が起こるかを定義します。

0
HackinGuy

これを行うと、任意の画面に合わせてページのサイズを変更できます。

body {
  background: white;
  width: 100%;
}

.content {
  width: 100%;
}

.paragraphs {
  width: 50%;
  margin: 0 auto;
}
<html>
  <head>
    <title>Example of resizing</title>
  </head>
  
  <body>
    <div class="content">
      <div class="header">
        <h1>Header</h1>
      </div>
      
      <div class="paragraphs">
        <p>#000000 color RGB value is (0,0,0). This hex color code is also a web safe color which is equal to #000. #000000 color name is Black color.

#000000 hex color red value is 0, green value is 0 and the blue value of its RGB is 0. Cylindrical-coordinate representations (also known as HSL) of color #000000 hue: 0.00 , saturation: 0.00 and the lightness value of 000000 is 0.00.

The process color (four color CMYK) of #000000 color hex is 0.00, 0.00, 0.00, 1.00. Web safe color of #000000 is #000000. Color #000000 rgb is equally color.</p>
      </div>
    </div>
  </body>
</html>

ありがとう

0
Josh Murray