Le redimensionnement des Éléments de Page basé sur la taille de la Fenêtre

Problème:
Mon Client souhaite me créer un lancement de site web pour son produit tel qu'il devrait y avoir pas de scroll sur la page, n'importe quel navigateur ou les dimensions de la fenêtre.

Doute: Est-ce possible à l'aide de CSS et de Javascript?

Certaines Diagnostic Précoce: Cela pourrait être un peu similaire à cette ou cette mais la différence est que je veux redimensionner les dimensions de chaque élément dans un rapport et non pas seulement de régler la hauteur d'un DIV parent.

Donc, l'instruction: j'ai besoin de changer les dimensions de tous les éléments (images, vrd, texte ... le tout basé sur un ratio entre le (taille de la fenêtre courante et une référence de taille de la fenêtre). Peut-être Javascript pourrait avoir un remède pour cela?

Question: Comment faire?

OriginalL'auteur OrangeRind | 2010-06-22

  1. 3

    Il suffit de régler le height et width de <html> et <body> à 100%, overflow à hidden et l'utilisation les pourcentages pour left, top, width et height d'éléments:

    <!DOCTYPE html>
<html>
<head>
  <meta charset=UTF-8>
  <title>Proportional resizing</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    div {
      position: absolute;
      left: 30%;
      top: 20%;
      width: 40%;
      height: 30%;
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <div>divthing</div>
</body>
</html>

    Ces pourcentages sont relatifs à la bloc contenant, qui est, dans ce cas <body>.

    Mise à jour: pour répondre À une autre question: le redimensionnement des images d'arrière-plan est presque pas encore pris en charge. Lorsque le CSS 3 background-size propriété gagne du terrain (voir ce tableau), les choses seront plus faciles. Pour l'instant, jetez un oeil à cette réponse (oui, cela signifie: plus de balisage).

    c'est sûrement possibble, mais ne serait-il prendre garde à ce que je veux afficher l'arrière-plan de la DIV dans son ensemble? coz, sur la petite fenêtre, fond serait de coupure, et une grande fenêtre il serait répéter... 🙂
    Aussi, depuis que j'ai CSS-identifiés la plupart de la page, avant cette demande spéciale de mon client a chuté, donc j'espérais que si il existait une solution qui ne serait pas me faire changer le CSS de nouveau. 😉 😉
    Tu veux dire, vous voulez l'arrière-plan à l'échelle de l'ensemble de la taille de la div?
    Concernant votre seconde remarque: non, vous presque vous ne pouvez pas faire cela sans modifier votre CSS et peut-être que votre structure HTML, trop. Ce genre de présentation, les choses sont étroitement liées à l'annotation et CSS. La seule façon de le faire sans modifier votre code HTML ou au moins votre CSS, est en effet à l'aide de JavaScript. Mais vous avez vraiment, vraiment ne voulez pas le faire de cette façon, vous ne devriez pas les tracas avec les positions de tous les éléments en JavaScript (et JavaScript peut être désactivé ou bloqué dans votre navigateur du visiteur).
    ouais, mise à l'échelle est nécessaire. :'( . . . Bien qu'un JS solution pourrait aussi aider, même si je peux essayer de passer du temps de réajustement dans le CSS, c'est juste que le temps est court. 🙂

    OriginalL'auteur Marcel Korpel