Bonsoir, je viens de remarquer une chose, mes navigateurs que ce soit firefox ou chrome m'indiquent une largeur en nombre de pixel quand je suis en full screen à 1500 px alors que mon écran est en 1920 px de large.

C'est hyper chiant.. je suis en trains de réfléchir à des seuils pour le responsive en essayant de réfléchir au définition d'écran les plus courantes mais maintenant je suis perdu je ne comprend pas et je ne sais pas quel valeur donner à mes @media 

C'est pareil sur les portables ? comment je fais pour savoir ?

-
Edité par altilou 13 novembre 2017 à 19:47:39

 Il y a trop d'appareils avec des tailles différentes, cela ferait beaucoup de valeur à donner aux @media.

Personnellement j'en retiens 3  : PC , tablette, smartphone.

Le but c'est que le site s'adapte automatiquement à l'espace disponible sur l'écran. Au lieu de donner une valeur en "px" à un block donne lui une valeur en "%" de manière à ce qu'il s'adapte automatiquement à l'espace disponible sur l'écran. (Un site élastique ^^).

Un exemple simple qui peut surement t'aider :

/* PC */

.container{
width: 1022px;
}

div{
height: 50px;
margin: 10px auto;
width: 250px;
}

/* SMARTPHONES&TABLETTES */

.container{
width: 100%;
}

div{
height: auto;
margin: 10px 20px;
width: 100%;
}

Voilà j'espère avoir pu t'aider.

-
Edité par Stiop 15 novembre 2017 à 0:56:51

Bonsoir, tu peux utiliser les media queries. Il y a deux méthodes desktop-first en partant de l'ordinateur et en allant jusqu'au portable ou mobile-first en partant du portable et en allant jusqu'à l'ordinateur. Si tu optes pour le mode mobile-first, tu peux mettre un min-width de 320px qui correspond aux plus petites résolutions de téléphones portables, mettre ensuite un media-query pour tablettes avec un min-width de 768px, et enfin un media-query pour ordinateurs avec un min-width de 992px, et à l'intérieur de ce media-query, des règles pour ordinateurs un max-width de 1300px, par exemple.

Merci pour vos réponses

@Stiop

Pour ton exemple c'est ce que j'avais commencé à faire sauf que pour les pc je me suis rendu compte que j'étais obligé de faire trop de seuils différents pour la taille des conteneurs sinon ils deviennent tout petits pour les écrans 4k ou trop gros pour les basses résolutions.

Alors je me suis dit que je pouvais très bien adapter mon conteneur en % lui aussi... du coup je lui ait dit 70% du viewport et margin auto.
Ça fonctionne très bien mais je constat que les sites que j'ai observé ne font pas ça... et je me demande si je ne fait pas une connerie.
Je m'apprête également à définir tous mes font-size en % 

-
Edité par altilou 15 novembre 2017 à 19:30:30