détecter la taille du navigateur et appliquer le css à chaque résolution

J’ai cette fonction que j’utilise pour appliquer des CSS à un menu lorsque le navigateur est redimensionné ou lorsque le menu est rendu avec différentes résolutions. Mon problème est-ce, pourquoi le navigateur n’interprète pas correctement ma fonction? parce que lorsque je redimensionne mon navigateur en mode complet à partir du mode demi, le navigateur n’interprète que '800-1024' résolution '800-1024' , mais si je ctrl+f5 dans le navigateur (tout effacer) interprète correctement ma résolution, quel est le problème dans ma fonction?

 function renderMenuCorection(){ if ($('#containerHeader').exists()) { var resizeObject = { '0-640': '9px,2px,-3px,12px', '640-800': '10px,2px,-5px,12px', '800-1024': '10px,8px,-8px,15px', '1024-1300': '12px,12px,-13px,11px', '1300-2000': ',20px,-21px' } var win = $(window); var win_width = win.width(); if (win_width > 0 && win_width  640 && win_width  800 && win_width  1024 && win_width  1300 ) { var value = getValueByKey(resizeObject, '1300-2000'); modifayMenu(value); } } } function modifayMenu(value){ var vals = value.split(',') $('#containerHeader').find('.roundMenuLi').each(function(index, item){ $(item).find('a').css('font-size', vals[0]); $(item).css('padding-right', vals[1]); $(item).css('padding-left', vals[1]); $(item).find('#secondUl').css('margin-left', vals[2]); $(item).css('padding-bottom', vals[3]); }); } function getValueByKey(obj, myKey){ $.each(obj, function(key, value){ if (key == myKey) { returnValue = value; } }); return returnValue; }

Je vous remercie !

Utilisez CSS3 et ses requêtes multimédia. Exemple:

 @media (max-width: 500px) { /* some CSS for small resolution */ } @media (min-width: 1000px) { /* some CSS for large resolution */ }

Si vous souhaitez créer un design réactif, ce lien peut vous aider.

la construction de conception sensible, vous devez considérer

Grille flexible
Images flexibles
Media Quires

/ * ci-dessous, le code joue un rôle important dans votre conception réactive sans que vous ne puissiez obtenir ce que vous voulez * /

/ * mettez ceci avant la balise de fin de head * /

 @media (max-width: 320px) { } @media (min-width: 720px) { }

Il est difficile de dire à partir de votre code, mais vous n’appelez probablement la fonction qu’une seule fois sur pageload. Pour que cela fasse ce que vous voulez, vous devez attacher un écouteur d’événement et appeler le code chaque fois que la fenêtre est redimensionnée.

Comme indiqué ci-dessus, envisagez de faire appel à Responsive Web Design pour utiliser les fonctionnalités du navigateur natif afin que vous n’ayez pas à lancer votre propre script pour le faire. Un bon sharepoint départ est un article de A List Apart sous le même nom.

Selon Pavel, les requêtes multimédia sont la meilleure solution. De plus, elles sont beaucoup plus rapides que tous les access au DOM que vous utilisez avec votre code. Le problème de compatibilité avec IE8 peut être résolu en utilisant un plugin JavaScript appelé Respond.js . Je n’ai pas essayé, mais cela semble être une bonne solution à votre problème.