Comment redimensionner dynamiquement en page web selon la taille de la fenêtre?

Je suis relativement nouveau pour le développement web, je me demandais si anyones sait hors main d'une solution simple pour faire la page que j'ai de développement de redimensionner dynamiquement à la taille de la fenêtre, sans déformer la mise en page. Je voudrais aussi essayer d'avoir la page centré ainsi, le problème, c'est que j'ai essayé de centrage mais comme je l'ai redimensionné la fenêtre les éléments sur la page déplacé hors de la place. Toute aide est appréciée.

Je suis allé de l'avant et mettre le code sur un serveur de sorte qu'il peut être facilement vu je l'ai fait surtout pour les tests. Le projet est volontaire et pourront éventuellement être utilisés dans le cadre d'un enseignement de la langue de l'outil. Je suis juste essayer d'obtenir la mise en page de sorte qu'il sera redimensionné dynamiquement sans déformer la mise en page.

Avec la configuration actuelle, je dois manuellement le zoom si la résolution de l'écran est faible pour obtenir la mise en page pour l'adapter correctement à l'intérieur de l'écran.

Je suis actuellement en utilisant un positionnement en CSS pour positionner les éléments de la page par rapport à l'arrière-plan de l'image, ils ont besoin d'être correctement positionné pour s'adapter au motif d'arrière-plan.

La page peut être consultée à http://www.kapacitive.com/Main_Page_Template.html aura pour afficher le code source de la page pour afficher le code.

Une fois de plus toute aide est très appréciée et s'il vous plaît si vous n'avez pas quelque chose d'utile à dire s'il vous plaît il suffit de ne même pas répondre. Merci.

InformationsquelleAutor Design Logic | 2011-11-11
  1. 4

    Pour atteindre un peu mise en page dynamique, vous pouvez utiliser CSS3 media queries:

    @media (max-width: 800px) {
  foo {
    ...
  }
}

@media (max-width: 500px) {
  foo {
    ...
  }
}

    Ils ciblent des tailles d'écran.

    • Merci pour la suggestion. Cela ressemble il détient beaucoup de potentiel et de courant navigateurs prennent en charge la fonctionnalité. Je me demande comment j'ai pu aller sur facilement et rapidement des tests entre les différentes tailles d'écran à l'aide d'une seule machine.
    • Redimensionner la fenêtre de votre navigateur 😉
    • Ha, je ne sais pas la taille de la fenêtre est bien, sans doute une façon de trouver rapidement l'aide de javascript. Aussi, avec cette méthode, seule la taille de la fenêtre est pris en compte est-il un moyen de prendre également en compte la résolution de l'écran ou une norme règle de base utilisé par les sorciers?
    InformationsquelleAutor Blender
  2. 1

    Supprimer la largeur du corps et de l'ensemble de ces styles à votre principale Nav Cubes:

    #mainNavCubes {
  position: absolute;
  left: 50%;
  top: 170px;
  margin-left: -240px;
}

    Ceci permettra de définir leur position au milieu de l'écran et avec la marge négative, vous pouvez pousser vers la gauche.

    • Je voudrais ajouter que la même chose devrait probablement être appliqué à la position verticale pour vrai de centrage, et que le corps doit avoir min-width jeu pour garder les choses de se répandre sur le dessus et sur le côté gauche de l'écran.
    • Le min-width sur le corps a un sens, sinon les conteneurs chevauchement et le positionnement vertical est bon, aussi. Je voulais juste montrer un début.
    • Le problème avec cela, que j'avais couru jusque-là, c'est que le MainNavCubes déplace indépendamment de l'arrière-plan et il doit être aligné avec la conception de fond.
    • Pas nécessairement. Vous pouvez possition l'arrière-plan, trop. Comme ceci: background-position: 50% 50%. Vous devriez être en mesure d'aligner les cubes avec quelques essais et d'erreur
    • Il va encore hors de l'alignement avec les redimensionne, pas aussi mal si.
    InformationsquelleAutor topek
  3. 0

    J'ai trouvé l'extension Web Developer pour Firefox ou Chrome

    Vérifier le lien suivant:

    https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm

    très utile pour mesurer à la fois la fenêtre et la taille de la fenêtre. Il vous permet aussi de définir la taille de la fenêtre en fonction de quelques tailles par défaut.

    (Il a un tas d'autres outils web outils de dev ainsi.)

    InformationsquelleAutor mandrill