J'ai un site Web qui utilise pixel pour rendre les pages. Mais lorsque j'iméliore le site Web de différents périphériques ayant une résolution d'écran différente, la page est la conception Web réactive est le bon choix pour concevoir la page Web. Si oui, j'ai peu de préoccupations.
3 Réponses :
Lire sur requêtes multimédia pour changer CSS en fonction de la largeur ou de la hauteur du navigateur.
Inclure Viewport < / a> Pour rendre vos pages Web sur les appareils mobiles échelle correctement.
Brett a suggéré génial. Et pour tous les écrans de média standard, consultez toutes les MediaQuiseries ici Scalédrop.com/blog/?p=783 < / a>
Utilisation de requêtes multimédia adaptera un CSS différent pour différentes tailles d'écran. La façon dont il fonctionne, c'est dire au navigateur: si ScreenWidth = 700px ou plus petit / plus grand; Utilisez mobile CSS. Si scanwidth = 1000px ou plus petit / plus grand; Utilisez le bureau CSS. Il n'y a pas de limite au nombre de requêtes de média que vous pouvez utiliser.
L'utilisation des pourcentages est également une possibilité; Design fluide . Je suggérerais de l'utiliser avec les requêtes des médias.
Quant aux frameworks, il y en a beaucoup. bootstrap est l'un des plus populaires. Je crois personnellement travailler mobile premier est le meilleur moyen de partir. Cependant, il existe encore un débat sur ce sujet.
comme Pete mentionné dans un commentaire plus tôt; Travailler avec une dégradation gracieuse (bureau d'abord) fera télécharger le périphérique autant que le site de bureau mais ne pas utiliser le contenu téléchargé. Quel est un énorme inconvénient pour l'utilisateur. (plus gros temps de pagéload, de nombreuses demandes de serveur, plus d'utilisation de MB Data, etc.) Par conséquent, pourquoi je pense que je pense que l'amélioration progressive (mobile d'abord) est la voie à suivre.
Utilisation d'une amélioration progressive, le navigateur téléchargera toujours le CSS mobile en premier; réduire les temps de pagéload extrêmement.
Pour les informations de support de navigateur sur une conception réactive, vérifiez Ce lien .
Je ne suis pas d'accord avec nommer Bootstrap un "cadre". Ce n'est pas ! Les gens seront mal écrits. LedicezIdItre est un cadre, BOOTSTRAP (bien qu'il soit nommé sur son propre site Web un cadre) Il s'agit simplement d'un ensemble de règles de CSS3 prédéfinies, que vous pouvez construire avec CSS directement. Un cadre contient un ensemble très complexe de fonctions et de variables personnalisées et offre des raccourcis pour le programmateur à utiliser. Je suis d'accord avec Bootstrap comme meilleur pour la conception fluide et réactive.
Je pense que l'identification d'une amélioration progressive avec le mobile d'abord est trompeuse
@LUCIANMINEA BOOTSTRAP est un cadre. Quoi qu'il en soit, appelez-lui un cadre ou non ne devrait pas causer de problèmes réels pour les personnes qui l'utilisent.
Regardez ci-dessous une tête typique réactive de HTML:
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;
}
(1) Il y a un risque de ne pas le faire, compte tenu du marché actuel, mais aucun risque de le faire. (2) Il y a beaucoup de cadres. Google 'Conception réactive' et vous trouverez de nombreuses ressources. Je commence moi-même un tel projet et je faisais juste qu'hier. (3) Les très excellentes ressources que vous trouverez à la suite de votre recherche Google expliqueront l'assistance sur différents appareils et navigateurs.
Vous voulez également examiner les avantages et les inconvénients de la conception réactive pour choisir de l'utiliser. Je préfère toujours créer un site mobile distinct car la conception réactive peut télécharger des appareils mobiles autant que le site de bureau mais ne pas utiliser de contenu qu'il télécharge