Tout d'abord, merci à tous pour les réponses et les précieuses lignes directrices, cela a certainement aidé!
Permettez-moi d'ajouter ma conclusion:
Pratiquement, le ciblage de la résolution d'écran mobile n'est pas un bon UX, la résolution est trop élevée pour le petit écran, les polices seront trop petites pour être lues, les icônes seront trop petites pour cliquer, etc.
Il est donc préférable de faire la conception en fonction de la taille réelle de la fenêtre! De cette façon, il est basé sur ce qu'un utilisateur peut voir et ressentir.
Pour y parvenir dans la vraie vie, nous devons ajouter une balise META de largeur de fenêtre d'affichage à l'intérieur <head>
des documents HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cela indique au navigateur de rendre la page avec une largeur égale à la largeur de l'écran afin de s'assurer que la largeur de la page HTML est égale à la largeur de l'écran en termes de pixels. Le développement peut alors être facilement planifié avec des requêtes multimédias ciblant différentes tailles de fenêtres mobiles (qui sont un peu proches les unes des autres), et produira des éléments plus visuellement clairs.
S'il vous plait corrigez moi si je me trompe.
Mettre à jour:
Sur la base de mon humble expérience, je suggère les étapes ci-dessous pour un meilleur développement de site Web réactif:
1- Utilisez la méta du port de vue (voir en haut), cela augmentera également le classement de la page Web dans les résultats de recherche mobile selon Google.
http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
Après les tests, il semble que l'ajout d'une méta de port de vue à lui seul donnera des notes à votre site Web dans les outils de test mobiles
https://developers.google.com/speed/pagespeed/insights/
2- Vous voudrez peut-être envisager d'appliquer l'approche mobile d'abord, il est toujours plus facile d'aller plus grand que plus petit (dépend de la complexité de votre site Web)
3- Appliquer un système hybride réactif, un mélange entre adaptatif (fluide) et réactif (css media-queries), pour y parvenir:
Utilisez un pourcentage pour la largeur et les marges / rembourrages horizontaux. (les marges verticales peuvent avoir une taille de pixel fixe si vous le souhaitez. le défilement n'est plus un problème)
Utilisez em pour les polices, de cette façon lorsque vous modifiez la taille de la police pour le corps (ou html) dans les requêtes multimédias, tous les éléments CSS s'adapteront à cette taille, l'utilisation de px en fera un cauchemar car vous devez choisir chaque classe CSS et changer sa taille de police.
Faites flotter les div à gauche pour qu'elles s'alignent correctement sur l'espace disponible (ou à droite si votre conception l'exige).
4- Définissez les points d'arrêt , utilisez un outil de test réactif pour cela. J'utilise la vue de conception sensible à Firefox, réduisez simplement la largeur jusqu'à ce que vous atteigniez le point où le site Web devient défectueux (par exemple 500 px), c'est un point de rupture le marquez.
Appliquez les nouvelles règles CSS à l'intérieur de la requête média pour ce point d'arrêt (500 px),
5- N'oubliez pas de préserver la qualité et la clarté du site Web! si les éléments deviennent flous et trop proches les uns des autres, augmentez la largeur des éléments pour occuper la largeur du conteneur et faites-les empiler verticalement,
et n'oubliez pas de donner une nouvelle taille de police pour le corps afin que tous les sous-éléments héritent d'une police plus grande et deviennent plus lisibles.
6- Répétez le test réactif et définissez votre deuxième point de rupture, Très probablement, vous n'obtiendrez pas beaucoup de points de rupture car nous utilisons la conception fluide ici et c'est là que l'utilisation du pourcentage sera rentable!
J'ai travaillé sur un grand site Web avec des éléments de conception lourds auparavant et cela ne nécessitait que 2 requêtes multimédias :)
J'espère que cela vous aidera