Conception réactive avec requête média: taille de l'écran?

Je suis en train de travailler sur le responsive conçu site web en utilisant les media queries. Mais je ne sais pas comment prendre une bonne largeur.

Conception réactive avec requête média: taille de l'écran?

Comme vous pouvez le voir sur ce tableau, il y a beaucoup de résolution différente, même pour un seul type d'appareil. Et que la résolution est à venir, de plus en plus grande sur l'appareil mobile, il est difficile de savoir ce que la conception d'appliquer pour une résolution spécifique.

Pour l'instant, je suis en utilisant ceci :

Premier Mobile

@media screen and (min-width:720px) => Phablet

@media screen and (min-width:768px) => Tablette

@media screen and (min-width:1024px) => ordinateur de Bureau

Merci pour tout conseils ou de bons conseils !

source d'informationauteur oOnez

  1. 14

    Responsive Web design (RWD) est une conception de sites Web approche visant à l'artisanat de sites et d'offrir une expérience de visionnement optimale

    Lors de la conception de votre site web réactif, vous devriez considérer la taille de l'écran et non pas le type d'appareil. Les requêtes de média vous aide à le faire.

    Si vous voulez le style de votre site par appareil, vous pouvez utiliser le user agent valeur, mais ce n'est pas recommandé car vous aurez à travailler dur pour maintenir votre code pour les nouveaux appareils, de nouveaux navigateurs, versions des navigateurs etc alors que lors de l'utilisation de la taille de l'écran, tout cela n'a pas d'importance.

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

    MAISà mon avis, vous devriez d'abord la conception de votre site internet mise en page, et seulement ensuite l'ajuster avec les media queries pour adapter possible les tailles d'écran.

    Pourquoi? Comme je l'ai dit avant, les résolutions d'écran variété est grande et si vous présentons la conception d'une version mobile qui est destiné à 320px votre site ne sera pas optimisé pour 350px écrans ou 400px écrans.

    CONSEILS

    1. Lors de la conception d'un réactif de page, l'ouvrir dans votre navigateur de bureau et de modifier la largeur du navigateur pour voir dans quelle mesure la largeur de l'écran affecte votre mise en page et le style.
    2. Pourcentage d'utilisation au lieu de pixels, il rendra votre travail plus facile.

    Exemple

    J'ai une table avec 5 colonnes. Les données semble bon lors de la taille de l'écran est plus grand que 600px j'ai donc ajouter un point d'arrêt à 600px et masque 1 moins important de la colonne lorsque la taille de l'écran est plus petit. Les appareils avec des écrans géants tels que les ordinateurs de bureau et les tablettes afficher toutes les données, tandis que des téléphones mobiles avec de petits écrans d'affichage d'une partie des données.

    État d'esprit

    Ne sont pas directement liées à la question mais aspect important en responsive design.
    Responsive design aussi un lien avec le fait que l'utilisateur a un état différent de l'état d'esprit lors de l'utilisation d'un téléphone mobile ou un ordinateur de bureau. Par exemple, lorsque vous ouvrez le site de votre banque le soir et vérifier vos stocks vous voulez autant de données sur l'écran. Lorsque vous ouvrez la même page de votre pause déjeuner votre voudrez probablement voir quelques détails importants, et pas tous les graphiques de l'année dernière.

  2. 12

    Voici les media queries pour dispositif commun de points d'arrêt.

        /* 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 */
}
  3. 3

    Les largeurs d'écran Bootstrap v3.x utilise sont comme suit:

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

    Donc, ce sont de bons à utiliser et fonctionne bien dans la pratique.

  4. 2

    Prendre un coup d'oeil à cette...
    http://getbootstrap.com/

    Pour les gros sites, je utiliser Bootstrap et parfois, pour des sites web simples) j'ai créer le style avec un @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 comme ça...

    .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 façon, vous aurez de grandes chances de disposer d'un site responsive à l'aide de points d'arrêt seulement pour ajuster le débit d'objets.

  5. 1

    je vais donner le mien parce que @muni solution s était un peu trop pour moi

    remarque: si vous souhaitez ajouter des définitions personnalisées pour plusieurs résolutions de l'ensemble, dire 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 sur le haut de la des définitions précises, de sorte qu'il cascades correctement (par exemple 'smartphone portrait" se doit de gagner contre 'mobile de manière générale,")

    //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