画面サイズに応じて画像とdivを作成する方法

問題があります。私のタイトルdivは、ページの幅に応じて変化します。しかし、div内の画像は左に浮かぶか、お互いに積み重ねられます。自動的にサイズを変更し、ページの中央に収まるようにするにはどうすればよいですか？画面サイズに応じて画像とdivを作成する方法

`<body> 
    <div class="nav"> 
     <ul> 
      <li id="active-text"><a class="active" href="#">Home</a></li> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">All Products</a></li> 
      <li><a href="#">Login</a></li> 
      <li><a href="#">Sign Up</a></li> 
      <li id="logo"><a href="#">logo</a></li> 
     </ul> 
    </div> 
    <div id="title"> 
     <p></p> 
    </div> 
    <div class="products"> 
     <a href=''><img src='http://g04.a.alicdn.com/kf/HTB1snhcKVXXXXXZXpXXq6xXFXXXN/WB1363-font-b-Korean-b-font-font-b-Style-b-font-font-b-Fashion-b-font.jpg' alt='' width='200px' height='320px'></a> 
     <a href=''><img src='http://g03.a.alicdn.com/kf/HTB1pkBKIXXXXXaGXFXXq6xXFXXXZ/2015-prefall-autumn-winter-middle-age-Fashion-font-b-mature-b-font-font-b-lady-b.jpg' alt='' width='200px' height='320px'></a> 
     <a href=''><img src='http://image.rakuten.co.jp/mountain-hop/cabinet/04035967/04654733/da1512-0005-01.jpg' alt='' width='200px' height='320px'></a> 
     <a href=''><img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS9iiobsGOL-7tKsLqf4luH-W4yaoEBnx1yFxEkE1FNJHoAL2YL' alt='' width='200px' height='320px'></a> 
    </div> 
     <div class="footer"> 
      <p>Copyright &copy; <?= date('Y'); ?> Chongqibao Inc. All rights reserved.</p> 
     </div> 
    </body> 
</html>` 


    html { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    font-family: 'Nunito', sans-serif; 
    background: url(coffee.jpg) no-repeat center center fixed; 
    background-size: cover; 
} 


.box { 
    border: 1px red dashed; 
} 

#title { 
    margin: auto; 
    margin-top: 20px; 
    width: 50%; 
    text-align: center; 
    color: #efefef; 
    font-size: 1.6em; 
    border: 7px solid #efefef; 
} 

.nav { 
    display: inline-block; 
    width: 100%; 
    background-color: #333; 
    padding: 0; 
    height: 58px; 

} 

#logo { 
    float:right; 
} 

#logo a:hover { 
    background-color: #333; 
} 

.nav ul { 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    list-style-type: none; 
} 

.active { 
    background-color: white; 
} 

#active-text a { 
    color: black; 
} 

.nav ul li { 
    float: left; 
    display: inline; 
} 

.nav ul li a { 
    display: block; 
    padding: 14px 16px; 
    line-height: 30px; 
    text-decoration: none; 

    color: white; 
} 

.nav ul li a:hover:not(.active) { 
    background-color: black; 
} 

.products { 
    margin-top: 30px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 80%; 
} 

.products img { 
    display:inline-block; 
    margin:5px 20px; 
    padding:5; 
    max-width: 100%; 
}

出典

2016-08-02 buttonSmasher96

レスポンシブcssを使用します。 @media (max-width: 500px) {}または@media (min-width: 500px) {}を設定し、スタイリング要素のCSSを内側の画面サイズに配置することができます。

これにより、応答する@mediaタグの内部に何を入れるかによって、要素の特定のプロパティまたはすべてのプロパティを変更できます。

はここでそれにW3Schoolsのウェブページである：http://www.w3schools.com/css/css_rwd_intro.asp

ホープ、この助けました！

出典

2016-08-02 23:00:30 Taylor

私はあなたのhtmlコードのヘッドで

<meta name="viewport" content="width=device-width, initial-scale=1.0>

を持っていない限り、それは小さい画面サイズでは動作しないというテイラーの答えに追加します。これはあなたのCSSの@mediaコードが実際に他のサイズに適応することを可能にします。

このサイトは@mediaコードの適切な幅を判断するのに役立ちます。

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

出典

2016-08-02 23:05:26 Kevin

ではなく、いくつかのピクセルの計算を行う：

使用ビューポート単位：vw, vh, vmin, vmax

px, pt, ...上

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

すなわち50vwは常にデバイスビューポートの幅の50％であろう。

出典

2016-08-02 23:37:33 dognose

まだ動作しませんでした。私が反応しやすいようにしようとしているのは、すべての画像が入っている私の "products" divです。私はサファリを使用しています。ウィンドウを水平に伸ばし始めたら、私の "title" divが実際にサイズ変更されている間に、すべての画像が左にプッシュされます。 – buttonSmasher96

画面サイズに応じて画像とdivを作成する方法

答えて

関連する問題