Responsive web design par l'utilisation de css ou de javascript?

Je vais faire un site web en responsive design. J'ai lu quelques informations sur css media query. Ce que je veux faire, c'est que la mise en page de ma page web semble différence à l'aide de différents dispositifs (comme les PC, tablettes ou smartphones).

Si j'utilise media query pour déterminer le périphérique à l'aide de la largeur de l'écran (en pixels), j'ai toujours s'inquiéter s'il y aura un nouveau périphérique à l'aide d'une très haute ppi de l'écran. Cet appareil peut menace, comme une tablette ou quelque chose comme PC?

Une autre solution qui est à l'aide de l'agent de l'utilisateur pour déterminer la catégorie de l'appareil en utilisant userAgent. Il y a également un problème, c'est que si l'appareil interprète pas le javascript bien, alors que la page peut-être cassé.

Une grande solution qui peut résoudre mon soucis? Ou quelle solution est la meilleure?

Ou j'ai mal compris la méthode d'utilisation des médias requête?

Merci.

OriginalL'auteur benleung | 2013-08-23

  1. 12

    CSS est le chemin à parcourir, et vous pouvez toujours fournir des secours pour les navigateurs qui ne prennent pas en charge les requêtes de média à l'aide d'un plugin js comme css3mediaqueries.js, mais s'appuyant sur les JS uniquement pour rendre votre site responsive est un risque, parce que vous ne pouvez pas dire à coup sûr si l'utilisateur a activé Javascript, et quand il est pas activé, il ne va pas être sensible plus.

    Aussi, il est considéré comme la meilleure pratique pour utiliser em valeurs pour questions des médias au lieu de pixels pour assurer que votre site toujours échelles de droit. Plus sur ce sujet dans cet article.

    Une autre astuce est d'en déterminer la requête de média des valeurs en fonction de votre contenu meilleurs points de rupture au lieu de dimensions de l'appareil, de cette façon vous assurez-vous également que votre contenu sera toujours regarder à droite, peu importe la façon dont beaucoup de nouveaux dispositifs sont faits.

    Espoir qui m'a aidé 🙂

    OriginalL'auteur Sara Sou

  2. 1

    id' utilise personnellement la CSS et de l'ensemble de min-width et max-width. La plupart responsive modèles de jours de l'utilisation de CSS. De cette façon, si il y a un nouvel appareil sur le marché, il faudra juste ajuster selon la taille de l'écran. 

    @media screen and (max-width:480px) { }
@media screen and (min-width:481px) { ) etc... etccc....

    OriginalL'auteur vzeke

  3. 0

    Je préfère utiliser requêtes de média en CSS.
    Il suffit d'écrire le requêtes après la CSS par défaut...

    @media screen and (max-width: 600px) { écrire ici que les éléments qui doivent changer de code pour des performances sensibles }

    .logo {
width: 200px;
height: 80px;
background: url... ;
background-size: 100%;
margin: 0;
}

@media screen and (max-width: 600px) {
.logo {
width: 150px;
height: 60px;
margin: 0 auto;
}
}

    N'oubliez pas d'insérer la fenêtre de code dans l'en-tête/HTML.

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=false" />
    Merci de ne pas inclure maximum-scale=1 et user-scalable=false moins d'avoir une très bonne raison de le faire. Terriblement hostile aux utilisateurs.
    J'ai inclure au maximum-scale=1 et user-scalable=false pour désactiver le mobile de zoom pour les sites sensibles et je n'ai jamais eu aucun problème avec elle.

    OriginalL'auteur Ico Portela

  4. 0

    Je préfère Twtitter Bootstrap sur l'utilisation de CSS3 media queries pour ces différents appareils.

    bootstrap utilise css3 media queries.
    Il ne vous, mais nous n'avons pas à s'en soucier

    OriginalL'auteur Tepken Vannkorn

  5. 0

    Essayer jRWD, JavaScript seul module que j'ai conçu récemment. Il utilise des 12 lignes de JavaScript et 2 petites fonctions d'assistance. Il est disponible sur GitHub, à https://github.com/BlackMagic/jRWD.

    Si vous voulez voir jRWD dans l'action, visitez http://ieee-qld.org. Assurez-vous d'inspecter le code source. Minimes JavaScript, le minimum de feuille de style CSS. Pas de jQuery.

    Cette réponse semble dépassée. Je n'ai pas trouvé de traces de jRWD dans la liste du site web.

    OriginalL'auteur BlackMagic