web-dev-qa-db-fra.com

Conception sensible avec requête multimédia: taille de l'écran?

Je travaille sur un site Web conçu pour répondre aux demandes des médias. Mais je ne sais pas comment prendre une bonne largeur. 

device resolution table

Comme vous pouvez le constater sur cette table, il existe de nombreuses résolutions différentes, même pour un seul type de périphérique. Et comme la résolution est de plus en plus grande sur un appareil mobile, il est difficile de savoir quelle conception appliquer pour une résolution spécifique. 

Pour l'instant, j'utilise ceci:

Mobile First

Écran @média et (largeur minimum: 720px) => Phablet

Écran @média et (largeur minimale: 768 pixels) => Tablette

Écran @média et (largeur minimale: 1024 pixels) => Bureau

Merci pour tout conseil ou recommandation!

cssresponsive-designmedia-queriesmobile-websitescreen-resolution
12
oOnez

Responsive Web Design (RWD) est une approche de conception Web visant à concevoir des sites pour fournir une expérience d'affichage optimale.

Lorsque vous concevez votre site Web réactif, vous devez tenir compte de la taille de l'écran et non du type d'appareil. Les requêtes des médias vous aident à le faire.

Si vous souhaitez attribuer un style à votre site par appareil, vous pouvez utiliser la valeur user agent, mais cela n'est pas recommandé, car vous devrez travailler dur pour conserver votre code pour les nouveaux appareils, les nouveaux navigateurs, les versions des navigateurs, etc. Tout cela n'a pas d'importance.

Vous pouvez voir des résolutions standard dans ce lien .

MAIS, à mon avis, vous devez d’abord concevoir la mise en page de votre site Web, puis l’ajuster ensuite avec les requêtes de supports en fonction de la taille de l’écran.

Pourquoi? Comme je l'ai dit précédemment, la variété des résolutions d'écran est grande et si vous concevez une version mobile ciblée à 320 pixels, votre site ne sera pas optimisé pour des écrans de 350 pixels ou de 400 pixels.

CONSEILS

  1. Lors de la conception d'une page responsive, ouvrez-la dans votre navigateur et modifiez la largeur du navigateur pour voir comment la largeur de l'écran affecte votre mise en page et votre style.
  2. Utilisez un pourcentage au lieu de pixels, cela facilitera votre travail.

Exemple

J'ai une table avec 5 colonnes. Les données semblent bonnes lorsque la taille de l'écran est supérieure à 600 pixels, j'ajoute donc un point d'arrêt à 600 pixels et masque une colonne moins importante lorsque la taille de l'écran est plus petite. Les appareils avec de grands écrans tels que les ordinateurs de bureau et les tablettes afficheront toutes les données, tandis que les téléphones portables avec de petits écrans afficheront une partie des données.

État d'esprit

Pas directement lié à la question, mais aspect important de la conception réactive .. La conception réactive concerne également le fait que l'utilisateur a un état d'esprit différent lorsqu'il utilise un téléphone mobile ou un ordinateur de bureau. Par exemple, lorsque vous ouvrez le site de votre banque le soir et vérifiez vos stocks, vous souhaitez afficher autant de données à l'écran. Lorsque vous ouvrez la même page pendant la pause déjeuner, vous voudrez probablement voir quelques détails importants et non tous les graphiques de l’année dernière.

16
Itay Gal

Voici les requêtes de support pour les points d'arrêt de périphérique courants.

    /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
16
muni

Les largeurs d'écran Bootstrap v3.x utilise sont les suivantes:

  • Extra small devicestéléphones(<768px).col-xs-
  • Small devices _/tablettes(≥768px).col-sm-
  • Medium devices _/Ordinateurs de bureau(≥992px).col-md-
  • Large devices _/Ordinateurs de bureau(≥1200px)/.col-lg-

Donc, ils sont bons à utiliser et fonctionnent bien dans la pratique.

4
Atrix

Jetez un oeil à cette ... http://getbootstrap.com/

J'utilise Bootstrap pour les grands sites Web et parfois (pour les sites Web simples), je crée tout le style avec des @mediaqueries. C'est très simple, il suffit de penser tout le code en pourcentage.

.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}

À l'intérieur du conteneur, votre structure doit avoir des largeurs en pourcentage telles que celle-ci ...

.col-1 {
width: 40%;
float: left;
}

.col-2 {
width: 60%;
float: left;
}

@media screen and (max-width: 320px) {
.col-1, .col-2 { width: 100%; }
}

Dans certaines interfaces simples, si vous commencez à développer le projet de cette manière, vous aurez de grandes chances d’avoir un site entièrement réactif utilisant des points de rupture uniquement pour ajuster le flux des objets.

2
Ico Portela

je vais fournir le mien parce que la solution de @muni était un peu exagérée pour moi

remarque: si vous souhaitez ajouter des définitions personnalisées pour plusieurs résolutions, dites quelque chose comme ceci:

//mobile generally   
 @media screen and (max-width: 1199)  {

      .irns-desktop{
        display: none;
      }

      .irns-mobile{
        display: initial;
      }

    }

Assurez-vous d’ajouter ces définitions au-dessus des définitions exactes, afin que les cascades se déroulent correctement (par exemple, "portrait de smartphone" doit gagner, par opposition à "mobile en général").

//here all definitions to apply globally


//desktop
@media only screen
and (min-width : 1200) {


}

//tablet landscape
@media screen and (min-width: 1024px) and (max-width: 1600px)  {

} // end media query

//tablet portrait
@media screen and (min-width: 768px) and (max-width: 1023px)  {

}//end media definition


//smartphone landscape
@media screen and (min-width: 480px) and (max-width: 767px)  {

}//end media query



//smartphone portrait
@media screen /*and (min-width: 320px)*/
and (max-width: 479px) {

}

//end media query
1
Toskan