Comment mettre en œuvre responsive web design et ses bonnes pratiques

J'ai un site qui utilise pixel pour rendre les pages. Mais quand j'ai vue le site web dans les différents dispositifs résolution d'écran différente de la page entière ne rentre pas dans l'écran et si j'utilise pourcentage, le contenu de la page sera obtenir coincé.

Est le responsive web design est le bon choix pour la conception de la page web. Si oui, j'ai quelques inquiétudes.

  1. Quel est le risque impliqué dans la conversion de site web existant pour intégrer responsive design.
  2. Est-il un cadre est disponible pour ce faire et qui est le meilleur
  3. Comment il est pris en charge sur les appareils et navigateurs
(1) Il y a un risque à ne pas le faire, étant donné le marché d'aujourd'hui, mais pas de risque à le faire. (2) Il y a beaucoup de cadres. Google "responsive design" et vous trouverez beaucoup de ressources. Je vais commencer un projet, moi-même et ce qu'ont fait hier. (3) Le très excellentes ressources que vous trouverez en tant que résultat de votre recherche sur Google vous expliquera de soutien, à travers différents appareils et navigateurs.
vous aussi voulez examiner les avantages et les inconvénients du responsive design pour faire un choix à utiliser. Je préfère encore la création d'un site mobile comme le responsive design peut rendre les appareils mobiles télécharger autant que le site de bureau, mais de ne pas utiliser le contenu, il est en cours de téléchargement

OriginalL'auteur n92 | 2013-06-06

  1. 8

    À l'aide de les media queries d'adapter une autre feuille de style css pour les différentes tailles d'écran. La façon dont cela fonctionne est dit au navigateur: si screenwidth = 700 pixels ou plus petit/grand; utiliser les css. Si screenwidth = 1000px ou plus petit/grand; utiliser de bureau css. Il n'y a pas de limite au nombre de requêtes de média que vous pouvez utiliser.

    À l'aide de pourcentages est aussi une possibilité; la conception de fluide. Je suggérerais à l'aide de cet ensemble avec les media queries.

    Comme pour les cadres, il ya beaucoup là-bas. Bootstrap est l'un des plus populaires. Personnellement, je crois de travail mobile first est la meilleure façon d'aller bien. Cependant, il ya encore un débat passionné sur ce sujet.

    De Pete mentionné dans un commentaire plus tôt, la collaboration avec la gracieuse dégradation (bureau de première) fera l'appareil de télécharger autant que le site de bureau, mais de ne pas utiliser le contenu téléchargé. Ce qui est un énorme inconvénient pour l'utilisateur. (Plus pageload fois, beaucoup de demandes au serveur, plus l'utilisation de MO de données, etc.) C'est pourquoi je pense que l'amélioration progressive, (mobile first) est le chemin à parcourir.

    À l'aide d'amélioration progressive, le navigateur sera toujours télécharger le mobile css d'abord; la coupe pageload fois extrêmement.

    Pour la prise en charge du navigateur d'info sur le responsive design, vérifiez ce lien.

    très utile info pour moi, à ce stade
    Content d'avoir pu aider.
    Je ne suis pas d'accord avec l'appellation "Bootstrap" un "cadre". Il n'est pas ! Les gens seront missleaded. CodeIgniter est un Framework, Bootstrap (même si c'est nommée sur son propre site web un cadre) c'est juste un ensemble prédéfini de règles CSS3, que vous pouvez créer avec le CSS directement. Un cadre contenant ensemble complexe de fonctions personnalisées et variables et offrent des raccourcis pour le programmeur à utiliser. Je suis d'accord avec Bootstrap comme le meilleur pour le fluide et responsive design.
    Je pense que l'identification progressive enhancement "mobile first" est trompeur

    OriginalL'auteur Jefferson

  2. 2

    Lire sur les media queries pour modifier le css en fonction du navigateur, la largeur ou la hauteur.

    Inclure fenêtre d'affichage pour rendre vos pages web sur les appareils mobiles à l'échelle correctement.

    Brett a suggéré génial. Et pour tous les écrans médiatiques vérifier tous les mediaqueries ici scaledrop.com/blog/?p=783

    OriginalL'auteur Brett Merrifield

  3. -3

    Regarder ci-dessous un typique sensible à la tête de html:

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="utf-8">
<meta name="description" content="How to make android app">
<meta name="author" content="Animesh Shrivastav">
<title>Make-Website</title>
<link rel="stylesheet" href="../css/my.css">

    et un type responsive css

    html {
    margin: 0;
    padding: 0;
}

body {
    font-size: 1em;
    font-family: sans-serif;
    margin-left: 20%;
    width: 78%;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    width: 20%;
    min-height: 1500px;
    color: rgba(255,255,255,0.5);
    background-color: #34495e;
}

    Maintenant vous comprendre.

    Si vous ne pouvez pas comprendre, puis vérifier mon site web ci-dessous:
    l'écriture de site web réactif dans l'éditeur de texte comme le bloc-notes

    OriginalL'auteur Animesh Shrivastav