Comment faire un élément DIV sensible

Donc sur mon petit site web, j'ai une div que je forme avec CSS et que j'ai été le tester avec différentes résolutions, la boîte regardé déformée sur un petit 11 pouces écran par rapport à mon 27 pouces de l'écran. Comment puis-je faire mon 700 pixels hauteur 200 pixels de largeur div look de la même taille sur l'ensemble de surveiller les tailles

Grâce

VOICI LE CODE CSS DE LA 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;
Afin de répondre pourcentage d'utilisation de la largeur et de la hauteur au lieu de pixels et d'ajouter CSS media queries (developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)
Apprendre les media queries !

OriginalL'auteur user2451511 | 2015-05-10

  1. 4

    Vous devez ajouter une balise meta à identifier la largeur et les demandes des médias pour effectuer une action lorsque la largeur est différente. Il serait également très utile d'ajouter un pourcentage sur votre css des éléments plutôt qu'en pixels.

    Code HTML:

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

    ajouter la balise meta pour permettre la page d'identifier la largeur de l'appareil. voir Mozilla à ce

    Dans cet exemple, une requête pour quatre différentes largeurs sur un <p> balise et d'arrière-plan sera appliqué. 

    <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, en utilisant la @media Screen à l'intérieur de votre css appelle une requête pour l'écran. Vous pouvez utiliser @Media all pour tous les supports (voir bibliographie) lorsque l'appareil atteint une épaisseur dans les limites de cette requête, le css sera ensuite appliquée à l'élément en question. voir un exemple actuel. Lorsque vous faites glisser la boîte dans le JSFiddle fenêtre, ça va changer la couleur de fond et la couleur de l'écriture, si la requête est satisfaite. Vous pouvez appliquer la même logique pour les téléphones, tablettes, tv et bureau. Les Media Queries pour les Appareils Standard - CSS Astuces

    Cet exemple a été fourni par un utilisateur Anonyme sur JSFiddle. Il fournit un exemple clair de ce qui est nécessaire pour vous assurer que vos éléments sont de style dans la correspondance de l'appareil en question. Je ne prends pas de crédit.

    Lecture

    - Microsoft - Media Queries

    - Règle @Media - W3C

    - Responsive Web Design Wiki

    OriginalL'auteur BIW

  2. 2

    Vous avez besoin pour rendre votre site responsive, pour ce faire, nous utilisons quelque chose qui s'appelle media queries qui est fondamentalement juste extra balisage dans votre feuille de styles css la syntaxe.

    Un grand cadre à utiliser car vous êtes débutant avec le responsive design serait à l'aide de Bootstrap, il est facilement adapté aux besoins de votre projet.

    Cela devrait également aider à vous donner une meilleure compréhension sur la façon fluide des systèmes de réseau sont intégrées dans votre site.

    Espérons que cette aide!

    OriginalL'auteur Jordan

  3. 2

    En plus de ce que la Jordanie a déclaré. C'est un grand endroit pour en apprendre davantage sur les questions des médias et de la réactivité: https://www.udacity.com/course/mobile-web-development--cs256

    OriginalL'auteur dakoto

  4. 0

    Il y a beaucoup de façons de faire une DIV réactif.
    Le plus facile est d'utiliser un framework comme bootstrap qui fait tout le travail pour vous.

    L'autre façon est d'utiliser des @media('max-width: 1024px'){//code...}
    de cette façon, vous permettra de définir ce qui va se passer dans chacune des résolutions d'écran que vous voulez.

    OriginalL'auteur HackinGuy