Changement de Classe CSS de la hauteur et la largeur en javascript en fonction de l'écran sur le res

Je veux de la taille d'une div de classe "contenu" à changer en fonction de la taille de l'utilisateur résolution de l'écran.

Jusqu'à présent Ive écrit ce javascript

function resize()
{

    if ((screen.width>1024)) { $(".content").style.width = 560 + "px"; $(".content").style.height = 315 + "px" }
    if ((screen.width>1280)) { $(".content").style.width = 640 + "px"; $(".content").style.height = 360 + "px" }
    else { $(".content").style.width = 853 + "px"; $(".content").style.height = 480 + "px" }
};

et, évidemment, dans le html, j'ai la classe".contenu

pourquoi ce code ne fonctionne pas?

Vous pouvez être mieux de regarder la taille du navigateur, pas la résolution de l'écran. Ne devrait pas votre contenu de répondre à la taille de mon navigateur, quel que soit mon screensize? Je ne garde pas mon navigateur en plein écran.
Pourquoi n'utilisez-vous pas les media queries?
Mon niveau de codage est très pauvre pour le moment. Malade de regarder dans les media queries maintenant...

OriginalL'auteur user2228313 | 2013-04-06

  1. 7

    Votre problème ici est que vous sont un mélange de jQuery et de matières javascript.

    Pour définir la largeur d'un élément avec jQuery, utilisez le largeur() ou css() méthode:

    $(".content").width(560);
$(".content").css('width',560);

    Avoir dit que, vous feriez mieux de regarder la taille du navigateur, pas la résolution de l'écran. Ne devrait pas votre contenu de répondre à la taille de mon navigateur, quel que soit mon screensize? Je ne garde pas mon navigateur en plein écran.

    Enfin, regardez css media queries même de répondre à la taille du navigateur. Il existe de bien meilleures façons de le faire.

    comment modifier la hauteur ainsi..
    api.jquery.com/height
    Vous voulez savoir comment définir la hauteur et la largeur? Utilisez les deux méthodes jquery que j'ai de vous le montrer. $(".contenu").largeur(560); $(".contenu").hauteur(315);

    OriginalL'auteur jszobody

  2. 1

    Vous pouvez essayer et il suffit d'utiliser jQuery et CSS

       function checkWindowSize() {  

    if ( $(window).width() > 1800 ) {  
        $('content').addClass('large');  
    }  
    else {  
        $('content').removeClass('large');  
    }  

}  

$(window).resize(checkWindowSize);

    Pour le CSS, vous devrez l'écrire comme ceci:

    #content{  

}  

.large #content{  

}

    Voici un tutoriel Source

    OriginalL'auteur Giovanni