web-dev-qa-db-fra.com

Existe-t-il un seul ensemble de requêtes multimédia pour tous les périphériques?

J'utilise différentes requêtes de support pour chaque type de résolution, existe-t-il une meilleure façon de le faire?

cssresponsive-webdesignwebsite-designdesignmedia-queries
1
Shyamala

Vous pouvez utiliser portrait et paysage pour détecter si la résolution est plus longue ou plus large, mais il est généralement préférable d’utiliser un ensemble de requêtes multimédia pour décomposer le type de périphérique le plus courant. Idéalement, votre site Web devrait utiliser des largeurs et des hauteurs avec des pourcentages plutôt que des éléments à base de pixels. Cela permettra à votre site Web de s’adapter à presque toutes les tailles. La plupart cadres réactifs utilisera cette méthode.

Parce que vous utilisez % plutôt que px votre contenu doit s'adapter, la taille du texte ne changera pas. Cependant, en utilisant 4 requêtes multimédia, vous pouvez facilement ajuster ces éléments et tout ce que vous voulez. .

Les tailles de requêtes multimédias courantes sont les suivantes:

  • Mobiles max-width:640px
  • Comprimés max-width:1024px
  • Ordinateurs de bureau max-width:1920px
  • 2K 4K max-width:1921px

Les résolutions ci-dessus ressemblent à quelque chose comme:

    /* Small screen max-width 640px */
    @media only screen and (max-width:40em){}
    /* Medium screen min-width 641px */ 
    @media only screen and (min-width:40.063em){}
    /* Medium screen min-width 641px and max-width 1024px */
    @media only screen and (min-width:40.063em) and (max-width:64em){}     
    /* Large screen min-width 1025px */ 
    @media only screen and (min-width: 64.063em){} 
     /* Large screen min-width 1025px and max-width 1440px */    
    @media only screen and (min-width: 64.063em) and (max-width: 90em){}
    /* Extra large screens  min-width 1441px */
    @media only screen and (min-width: 90.063em){}
     /* Extra large screens  min-width 1441px and max-width 1920px */   
    @media only screen and (min-width: 90.063em) and (max-width: 120em){}
    /* Extra Extra large screens min-width 1921px */  
    @media only screen and (min-width: 120.063em){}

Vous ne devez pas chercher à rendre la page exactement identique sur tous les périphériques. Son point commun à la conception réactive est que les pages auront une apparence légèrement différente d’un périphérique à l’autre, en raison de la largeur ou de la hauteur du périphérique.

Ce que vous devriez viser, c'est un site qui a fière allure et qui fonctionne bien avec les résolutions. Lors de la conception de votre site, vous pouvez redimensionner la fenêtre du navigateur et voir comment votre page se comporterait sur différents appareils. Elle devrait être lisible, avoir une belle apparence et tout ce qui ne fonctionne pas sur le mobile le modifier ou utiliser display:none. , il est assez courant de désactiver les fonctionnalités sur mobile pour des chargements de page plus rapides et une meilleure expérience utilisateur. Essayer de créer exactement le même look sur tous les appareils est impossible et représente une perte de temps.

Je vous recommande de vous diriger vers Stack Overflow car il existe des centaines de sujets littéraires concernant les requêtes de médias , car toutes les questions relatives aux CSS détaillées sur Pro Webmasters seraient mieux adaptées à SO.

1
Simon Hayter