J'ai de nombreux éléments positionnés absolument dans ma page. Quelle est la méthode de meilleure pratique pour réajuster sa position sur le redimensionnement de la fenêtre (tous)?Meilleure pratique pour repositionner des éléments positionnés de manière absolue sur le redimensionnement de la fenêtre
Je suggérerais que la meilleure pratique consiste à faire ceci avec CSS et évite de le faire avec JavaScript si vous le pouvez. Donc, évitez le positionnement absolu quand vous le pouvez, et lorsque vous utilisez absolument des pourcentages plutôt que des pixels, utilisez right plutôt que left lorsque vous positionnez les éléments que vous voulez ancrer correctement, utilisez bottom plutôt que top lorsque vous positionnez des éléments que vous voulez ancrer au fond, etc. ., etc. Par exemple: Laissez le navigateur gérer pour vous.
Exemple:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Resize Demo Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
#anchorRight {
position: absolute;
right: 0px;
top: 20%;
border: 1px solid black;
}
#anchorBottom {
position: absolute;
bottom: 0px;
left: 20%;
border: 1px solid black;
}
#anchorBoth {
position: absolute;
right: 0px;
bottom: 0px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Look, Ma, no JavaScript required.</p>
<div id='anchorRight'>Anchor right, 20% from top</div>
<div id='anchorBottom'>Anchor bottom, 20% from left</div>
<div id='anchorBoth'>Anchor bottom and right</div>
</body>
</html>
Une solution pure CSS peut ne pas être toujours possible. Lorsque vous le faites avec JavaScript, vous devez regarder non seulement les événements de redimensionnement de la fenêtre, mais aussi le redimensionnement du texte, ce qui est plus pénible (Google Closure library inclut des utilitaires pour ce faire). Veillez également à incorporer hysteresis pour éviter de repositionner vos éléments trop fréquemment pendant l'opération de redimensionnement. (Un moyen facile de le faire est de répondre à un redimensionnement en définissant une fonction appelée par setTimeout un quart de seconde plus tard et en mémorisant la poignée de la minuterie: si vous obtenez un autre événement de redimensionnement avant l'appel de la fonction, annulez le minuteur précédent Vous pouvez définir un nombre maximum de fois que vous différerez le redimensionnement avant d'aller de l'avant [pour afficher les mises à jour intermédiaires], mais puisque le déplacement de ces éléments avec JavaScript peut être un peu lent, vous ne voulez pas le faire sur chaque événement intermédiaire vous obtenez lors de l'opération)
+1: Je voudrais seulement avertir que le développeur devrait vérifier si un pourcentage de distance des bords de la fenêtre est ce qu'il veut vraiment. – Robusto
@Robusto: Oh, absolument. J'ai seulement utilisé des pourcentages dans l'exemple pour démontrer que l'on * peut *. Cela pourrait souiller le point ... –
En utilisant jQuery vous pouvez effectuer les opérations suivantes:.
jQuery(window).resize(function() {
jQuery('#ContainerDiv').html(jQuery('#ContainerDiv').html());
});
Bien qu'il soit sans doute pas la meilleure pratique.
Je pense que les gens vont avoir besoin de plus d'informations, car il y a un certain nombre de façons différentes dans lesquelles les éléments peuvent être positionnés de façon absolue. – Pointy
différentes façons? je pensais que la position: absolue avec un haut et à gauche les positionnerait absolument – Ajay
@Ajay bien oui; ce n'est pas ce que je voulais dire :-) Je voulais dire que ça dépend vraiment de ce à quoi ressemblent vos pages. Parfois, la façon dont les choses sont positionnées - même avec "position: absolute" - est qu'elles seront redimensionnées avec la fenêtre. Parfois, cela n'a pas de sens pour eux de changer quand la fenêtre est redimensionnée. Tout dépend de la conception. – Pointy