dans le monde d’aujourd’hui, il existe une pléthore d’appareils parmi lesquels les gens peuvent choisir et il peut être décourageant d’essayer de s’adapter et de créer les meilleures expériences sur tous les appareils. Cependant, il est important de rester à jour avec les tailles d’écran et les résolutions les plus populaires lors de la conception de sites Web et Mobiles. Un site optimisé et réactif facilite le flux des utilisateurs et, en fin de compte, une expérience agréable pour votre public.,
Taille de L’Écran, Résolution et fenêtre D’affichage: Qu’est-ce que tout cela signifie?
lorsque vous achetez un appareil, vous verrez souvent la taille de l’écran et la résolution listées dans les spécifications. Le screensize est la mesure physique en diagonale de l’écran en pouces. Ceci ne doit pas être confondu avec la résolution, qui est le nombre de pixels sur l’écran souvent affiché en largeur par hauteur (c’est-à-dire 1024×768). Étant donné que les appareils ayant la même taille d’écran peuvent avoir des résolutions très différentes, les développeurs utilisent des fenêtres d’affichage lorsqu’ils créent des pages conviviales pour les mobiles., Les fenêtres d’affichage sont des versions réduites de résolutions qui permettent aux sites d’être consultés de manière plus cohérente sur différents appareils. Les fenêtres d’affichage sont souvent plus standardisées et plus petites que les tailles de résolution.
alors que les écrans de bureau et d’ordinateur portable sont en orientation paysage (plus large que grand), de nombreux appareils mobiles peuvent être tournés pour afficher les sites Web en orientation paysage et portrait (plus grand que large). Cela signifie que les concepteurs et les développeurs doivent concevoir pour ces différences.
besoin d’aide pour déterminer si votre site web est réactif? Utilisez notre outil MG gratuit, Responsive Design Checker.,
alors que les écrans de bureau et d’ordinateur portable sont en orientation paysage (plus large que grand), de nombreux appareils mobiles peuvent être tournés pour afficher les sites Web en orientation paysage et portrait (plus grand que large). Cela signifie que les concepteurs et les développeurs doivent concevoir pour ces différences.
Responsive Style
Il serait presque impossible pour les entreprises de conception pour chaque type de périphérique. Au lieu de cela, lors de la programmation de conceptions réactives, les développeurs:
- regroupent souvent le style dans les tailles d’appareils les plus typiques pour les téléphones, les tablettes et les ordinateurs de bureau., Dans ce cas, tout ce qui dépasse 7 pouces est généralement affiché à la résolution du bureau ou –
- utilisez des points d’arrêt (largeurs de pixels définies que l’affichage ajustera en fonction de la taille de l’écran) en fonction de la conception et de la mise en page
parfois, un développeur peut choisir de combiner les deux Nous vous recommandons de commencer par regrouper les tailles d’appareils typiques.
Si vous êtes un développeur et que vous cherchez à générer les styles nécessaires pour gérer le style mobile ou réactif, nous avons inclus ci-dessous un extrait de CSS qui pourrait vous aider.,d seulement être utilisé comme guide pour commencer:
/* start of desktop styles */
@media screen and (max-width: 991px) {
/* début des grands styles de tablettes */
}
@media screen and (max-width: 767px) {
/* début des styles de tablettes moyennes */
}
@media screen and (max-width: 479px) {
/* début des styles de téléphone */
}
résolutions d’écran les plus populaires
sachant qu’il est essentiel de s’adapter aux nombreux appareils différents lors de la conception de sites Web, nous avons compilé une liste des appareils les plus à jour avec, Nous avons également mis ces informations dans un PDF téléchargeable pratique.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Partagez avec nous sur Facebook!