Très bien, je vois beaucoup de désinformation ici. Pour commencer, créer une page Web en utilisant une certaine résolution, disons 800x600 par exemple, rend cette page rendue correctement en utilisant uniquement cette résolution! Lorsque cette même page est affichée sur l'ordinateur portable de quelqu'un d'autre ou sur le moniteur de l'ordinateur personnel, la page sera affichée en utilisant la résolution actuelle de cet écran, PAS la résolution que vous avez utilisée lors de la conception de la page. Ne créez pas de pages Web pour une résolution spécifique! Il y a trop de rapports d'aspect et de résolutions d'écran différents pour s'attendre à un scénario «taille unique», qui avec la conception Web n'existe pas. Voici la solution: utilisez CSS3 Media Queries pour créer du code adaptable en résolution. Voici un exemple:
@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}
Vous voyez, ce que nous venons de faire, c'est de spécifier 3 ensembles de styles qui sont rendus à différentes résolutions. Dans le cas de notre exemple, si la résolution d'un écran est supérieure à 800px, le CSS pour 1024 sera exécuté à la place. De même, si l'écran affichant le contenu était de 1224px, le 1280 serait exécuté puisque 1224 est supérieur à 1024. Le site sur lequel je travaille maintenant fonctionne à toutes les résolutions de 800x600 à 1920x1080. Une autre chose à garder à l'esprit est que tous les moniteurs avec la même résolution n'ont pas la même taille d'écran. Vous pouvez mettre 15,4 ordinateurs portables côte à côte, alors que les deux se ressemblent, les deux peuvent avoir des résolutions radicalement différentes, car tous les pixels n'ont pas la même taille sur différents écrans LCD. Alors, utilisez des requêtes multimédias et commencez à créer votre site Web avec un écran d'ordinateur portable à haute résolution, en particulier 1280+. Aussi, créez chaque requête multimédia en utilisant une résolution différente sur votre ordinateur portable. Vous pouvez utiliser vos paramètres de résolution dans Windows pour réduire 800x600 et créer une requête multimédia à cette résolution, puis passer à 1024x768 et créer une autre requête multimédia à cette résolution. Je pourrais continuer encore et encore, mais je pense que vous devriez comprendre.
MISE À JOUR: Voici un lien vers l'utilisation des requêtes multimédias qui vous aidera à en expliquer davantage,
Conception Web innovante pour les appareils mobiles avec requêtes multimédias
Ce tutoriel vous montrera comment concevoir pour tous les appareils. Il existe également des didacticiels pour les requêtes multimédias en particulier. J'ai développé l'intégralité du site pour effectuer un rendu sur tous les appareils, tous les écrans et toutes les résolutions en n'utilisant aucun sous-domaine, et uniquement CSS! Je travaille toujours sur le support des tablettes et des téléphones intelligents. Le site est parfaitement rendu sur n'importe quel ordinateur portable ou sur votre téléviseur LCD 50 pouces, et de nombreuses pages fonctionnent parfaitement sur tous les appareils mobiles. Si vous mettez tout votre code sur la page, vos pages se chargeront rapidement! Veillez également à prêter attention à la discussion dans cet article sur le CSS "background-size: cover;" ou "contiennent" des propriétés, elles rendront vos graphiques d'arrière-plan fluides et capables de rendre parfaitement à toutes les résolutions.
Suivez les tutoriels des sites et vous pouvez créer une seule page Web qui rend sur tout et n'importe quoi!