Comment empêcher le déplacement et/ou le redimensionnement des éléments lors du redimensionnement de la fenêtre?

Question

Je comprends que cette question a été posée un nombre incalculable de fois et j'ai regardé à travers eux. D'accord, je travaille actuellement sur un site web, juste pour la pratique personnelle, et je commence par faire la mise en page. Il y a le système de quadrillage Boostrap, la zone particulière que nous examinons comporte deux col-md-3 et un col-md-6, nous examinons le col-md-6. Fondamentalement, je fais semblant de faire un site pour une entreprise qui organise des fêtes et des événements etc, comme vous pouvez évidemment le dire par les noms des ID et des classes.

Comme nous pouvons le voir sur les captures d'écran, lorsque je redimensionne ma fenêtre, les #h1, #EventParagraph et .event dans la plus grande div #Events sont tous déplacés et mélangés lorsque je redimensionne ma page. J'essaye de réaliser l'une ou l'autre de deux choses, faire strictement pour la vue de bureau et juste n'avoir pas bougé du tout, ou le rendre mobile et comprimé et avoir le déplacement et le redimensionnement reflètent ces changements. Je voudrais des solutions de code pour les deux.

Voici les résultats d'image:

C'est ce qu'il ressemble d'abord

Alors ce qui est arrivé quand j'appuyé sur le bouton vers le bas restaurer sur mon navigateur Alors c'est ce qui résulte quand je rends mon navigateur plus petit

Voici le code en cours.

CSS

#Events { 
border-color: black; 
border-width: 1px; 
border-style: solid; 
height: 300px; 
min-width: 90%; 
margin-top: 20px; 
margin-left: 25px; 
overflow: auto; 
} 

#Party { 
height: 150px; 
width: 150px; 
border-color: black; 
border-width: 1px; 
border-style: solid; 
float:right; 
margin-right:15px; 
margin-top: 65px; 
border-radius: 75px; 
} 

#h1 { 
border-color: black; 
border-width: 1px; 
border-style: solid; 
height: 50px; 
min-width: 300px; 
float:left; 
margin-left: 15px; 
margin-top: 15px; 
} 

#EventParagraph { 
border-color: black; 
border-width: 1px; 
border-style: solid; 
height: 150px; 
width:330px; 
margin-left: 15px; 
margin-top:70px; 
} 

.event { 
border-color: black; 
border-width: 1px; 
border-style: solid; 
height: 50px; 
width: 200px; 
background-color: white; 
margin-left: 15px; 
margin-top: 10px; 
} 

.event h1 { 
font-family: Friday Night Lights, sans-serif; 
height:inherit; 
} 

HTML

<div class="row"> 
    <div class="col-md-3" style="border-color: black; border-width: 1px; border-style: solid; height: 350px"> 
     <div id="SocialMedia"> 
      khkhkh 
     </div> 
    </div> 
    <div class="col-md-6" style="border-color: black; border-width: 1px; border-style: solid; height: 350px"> 
     <div id="Events"> 
      <div id="h1"> 
      </div> 
      <div id="Party"></div> 
      <div id="EventParagraph"></div> 
      <div class="event"></div> 
     </div> 
    </div> 
    <div class="col-md-3" style="border-color: black; border-width: 1px; border-style: solid; height: 350px"> 
     <div id="SocialMedia"> 
      khkhkh 
     </div> 
    </div> 
</div> 

Answer 1

.container{ 
 
    margin:0 auto; 
 
    padding:0; 
 
    width:90%; 
 
    min-height: 900px; 
 
    border:1px solid black; 
 
} 
 
#heading,#jumbotron{ 
 
    width: inherit; 
 
    border:1px solid black; 
 
    margin:0px auto; 
 
    text-align: center; 
 
    color:white; 
 

 
} 
 
#heading{ 
 
    background-color: blue; 
 
} 
 

 
#jumbotron{ 
 
    background-color: gray; 
 
    min-height: 150px; 
 
    line-height: 149px; 
 

 
} 
 
#partyContainer{ 
 
    width: inherit; 
 
    min-height: 400px; 
 
    margin:10px auto; 
 
    border:1px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
.partyItem{ 
 
    width:30%; 
 
    min-height: 200px; 
 
    border:1px solid black; 
 
    display:inline-block; 
 
    padding:10px; 
 
    box-sizing: border-box; 
 
    margin-top:10px; 
 
    margin-left: 25px; 
 

 
} 
 
#footer{ 
 
    text-align: center; 
 
    margin-top: 20px; 
 
} 
 
@media only screen and (max-width: 768px) { 
 
    .partyItem{ 
 
    display: block; 
 
    width: 90%; 
 
    margin:0px auto; 
 

 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title></title> 
 
    <style> 
 
    </style> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div id="heading"> 
 
     <h1>Company1</h1> 
 
    </div> 
 
    <div id="jumbotron"> 
 
     <h2>Organizing parties for you</h2> 
 
    </div> 
 

 
    <div id="partyContainer"> 
 
     <div class="partyItem"> 
 

 
     </div> 
 
     <div class="partyItem"> 
 

 
     </div> 
 
     <div class="partyItem"> 
 

 
     </div> 
 
    </div> 
 
    <div id="footer"> 
 
    &copy 2017 
 
    </div> 
 
     
 
</div> 
 
</body> 
 
</html> 
 

 

 
<!-- begin snippet: js hide: false console: true babel: false -->

1. J'ai vu que vous avez utilisé le même ID pour deux div. L'identifiant est unique.

2. vous devez faire tout votre CSS dans le fichier externe

   Sur le fond de CSS, vous devriez voir @media. Ceci est synonyme de requêtes média. Ce que j'ai fait a été d'abord stylisé la page avec quelques règles de base CSS, définir des marges, et aligné ces boîtes dans une rangée juste comme vous verriez sur un bureau. La chose principale est que j'ai utilisé la requête de médias où il dit quelque chose comme ceci, juste pour le rendre simple - "quand vous atteignez la 768px appliquez les lignes de code suivantes" Ensuite, ces boîtes vont être empilés les uns sur les autres , pour le rendre réactif. Vous devez utiliser les requêtes média pour prendre soin du côté réactif de votre site. Dans la balise, je mets la méta-balise Un élément de fenêtre donne au navigateur des instructions sur la manière de contrôler les dimensions et la mise à l'échelle de la page. La partie échelle initiale = 1.0 définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur. Aussi, vous devriez utiliser ces min-height au lieu de "height" donc par exemple si vous définissez la "min-height" pour le conteneur à 100px. Cela signifie que le conteneur commencera à 100px et que s'il y a du contenu à l'intérieur qui pousse le conteneur au-delà de 100px, il continuera de croître, il ne sera pas fixé à 100px. J'espère que cela vous aide, vous pouvez mettre tout ce que vous voulez dans ces boîtes, je voulais juste montrer comment vous pouvez les ajuster à la taille de l'écran, et quelles techniques vous pouvez utiliser pour y parvenir.