web-dev-qa-db-fra.com

Comment rendre un élément DIV sensible

Donc, sur mon petit site Web, j'ai une div que j'ai stylée avec CSS et comme je testais avec différentes résolutions, la boîte semblait déformée sur un petit écran de 11 pouces par rapport à mon écran de 27 pouces. Comment puis-je donner à ma taille de 700 pixels une largeur de 200 pixels une apparence identique à toutes les tailles d'écran?

Merci 

ICI IS LE CSS DU DIV:

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

Vous devrez ajouter une balise META pour identifier la largeur et les requêtes de média pour effectuer une action lorsque la largeur est différente. Il serait également très utile d’ajouter un pourcentage sur vos éléments CSS plutôt que sur des pixels. 

Code HTML:

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

ajoutez la balise meta pour permettre à la page d'identifier la largeur du périphérique. voir Mozilla prend ça

Dans cet exemple, une requête portant sur quatre largeurs de périphérique différentes sur une balise <p> et sur un arrière-plan sera appliquée. 

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

Le code 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;
  }
}

Donc, utiliser le @media Screen dans votre css appelle une requête pour l’écran. Vous pouvez utiliser @Media all pour tous les périphériques de supports (voir lectures supplémentaires) lorsque la largeur de périphérique atteint les limites de cette requête, le fichier CSS sera ensuite appliqué à l'élément en question. voir un exemple actuel . Lorsque vous faites glisser la zone dans la fenêtre JSFiddle, la couleur de l'arrière-plan et celle de l'écriture sont modifiées si la requête est satisfaite. Vous pouvez appliquer la même logique aux téléphones, tablettes, téléviseurs et ordinateurs de bureau. Requêtes sur les supports pour périphériques standard - Astuces CSS

Cet exemple a été fourni par un utilisateur anonyme sur JSFiddle. Il fournit un exemple clair de ce dont vous avez besoin pour vous assurer que vos éléments sont stylés en correspondance avec le périphérique en question. Je ne prends aucun crédit.

Lectures complémentaires  
- Microsoft - Requêtes avec les médias
- @Media Rule - W3C
- Wiki Responsive Web Design

4
BIW

Vous devez rendre votre site Web réactif. Pour ce faire, nous utilisons quelque chose appelé requêtes multimédia , qui est fondamentalement un balisage supplémentaire dans votre syntaxe CSS.

Un cadre génial à utiliser puisque vous débutez avec une conception réactive consiste à utiliser Bootstrap , il est facilement personnalisable pour répondre aux besoins de votre projet.

Cela devrait également vous aider à mieux comprendre comment les systèmes de grille de fluide sont intégrés à votre site.

J'espère que cela t'aides!

2
Jordan

En plus de ce que Jordan a dit. C’est un excellent endroit pour en savoir plus sur les requêtes des médias et leur réactivité: https://www.udacity.com/course/mobile-web-development--cs256

2
dakoto

Il existe de nombreuses manières de rendre une DIV réactive. La plus simple consiste à utiliser un cadre tel que bootstrap qui effectue tout le travail à votre place.

L’autre méthode consiste à utiliser @media('max-width: 1024px'){//code...} Pour définir ce qui se passera dans chacune des résolutions d’écran souhaitées.

0
HackinGuy

Vous pouvez le faire pour redimensionner la page pour s’adapter à n’importe quel écran:

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>

Merci

0
Josh Murray