Wie mache ich meine Bilder und div reagiert auf die Bildschirmgröße

So habe ich ein Problem. Mein Titeldiv ändert sich in Abhängigkeit von der Breite der Seite. Die Bilder im Div werden jedoch nach links oder übereinander gestapelt. Wie stelle ich es so her, dass sie automatisch die Größe ändern und auf der Seite zentriert bleiben?Wie mache ich meine Bilder und div reagiert auf die Bildschirmgröße

`<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%; 
}

Quelle

2016-08-02 buttonSmasher96

Ich würde reaktionsschnelles CSS verwenden. Sie können @media (max-width: 500px) {} oder @media (min-width: 500px) {} einstellen und die CSS für Styling-Elemente auf diese Bildschirmgrößen setzen.

Damit können Sie bestimmte oder alle Eigenschaften der Elemente ändern, je nachdem, was Sie in die reaktionsfähigen @media Tags einfügen.

Hier ist die W3Schools Webseite darauf: http://www.w3schools.com/css/css_rwd_intro.asp

Hope this geholfen!

Quelle

2016-08-02 23:00:30 Taylor

Ich möchte Taylor Antwort hinzufügen, dass es nicht auf kleineren Bildschirmgrößen arbeiten, wenn Sie einen Code

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

in den Kopf Ihrer html haben. Dies erlaubt dann Ihrem @ media-Code in Ihrem CSS, sich tatsächlich an die anderen Größen anzupassen.

Diese Website wird Ihnen auch helfen, richtige Breiten in Ihrem @ media-Code zu bestimmen.

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

Quelle

2016-08-02 23:05:26 Kevin

Rather einige Pixelberechnungen als tun:

Nutzungseinheiten Ansichtsfenster: vw, vh, vmin, vmax über px, pt, ...

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

d.h. 50vw immer 50% der Breite Geräte Darstellungsfeld sein.

Quelle

2016-08-02 23:37:33 dognose

Es hat immer noch nicht funktioniert. Ich denke, was ich versuche zu reagieren ist mein "Produkte" div, das alle Bilder enthält. Ich benutze Safari. Sobald ich anfange, das Fenster horizontal zu erweitern, werden alle Bilder nach links verschoben, während mein "Titel" div sich selbst in der Größe ändert. – buttonSmasher96

Wie mache ich meine Bilder und div reagiert auf die Bildschirmgröße

Antwort

Verwandte Themen