Bonjour à tous, 

Je commence très sérieusement à bien comprendre toutes les propriétés du language CSS. Dans le tutoriel je suis au niveau de flexbox, cependant j'ai quelques interrogations avant d'avancer.

Je suis en train rechercher pour savoir comment faire pour faire qu'un site web s'adapte à toutes les résolutions d'écran, et là beaucoup de débat : certains recommandent de mettre les tailles en px, d'autres en %, rem, etc... 

Alors je voulais savoir avant de me lancer dans mon site web, quelle(s) unité(s) sont les plus appropriées pour qu'un site web s'adapte à toutes les résolutions d'écran... C'est-à-dire dans quel cas utiliser les px, em, rem etc (ce qui n'est pas ultra bien expliqué dans le tuto html/css à tort, je trouve). 

Alors pour quelles situations dois-je privilégier les px aux % etc... ?

Autre chose, j'ai cherché pas mal de solutions sur internet et deux retiennent mon attention (j'attends donc votre avis et votre préférence sur l'une des deux ) :

Première solution : 

.left {
  float: left;
  width: 230px;
}

.right {
  float: right;
  width: 230px;
}

.center {
  margin: 0 240px;
}

Seconde solution : 

html /* les tailles sont à choisir selon vos besoins */
{
  font-size: 10 px;
  @media (min-width: 48em) { font-size: 12 px; }
  @media (min-width: 62em) { font-size: 14px; }
  @media (min-width: 75em) { font-size: 16px; }
}

Qu'en pensez-vous ? Si j'utilise un de ces codes CSS, est-ce que je peux mettre les unités qui me sont le plus simples à utiliser en tant que "débutant" ? 

Merci pour votre aide

-
Edité par LucasA. 5 août 2018 à 16:15:02

Je connais pas vraiment de situation où il est judicieux d'utiliser autre chose que les %, les vw et les vh.

hello,

Pour moi le % donne un résultat bien trop approximatif, c'est un calcul par rapport à un conteneur sur des écrans avec des ratios différents...

Il faut chercher sur le net, ex : https://www.w3.org/Style/Examples/007/units.fr.html 

@Lucky13 du coup tu préfères quelles unités?

Déjà le px, puis cela dépend du contenu textuel souhaité (rem, em)

Il faut la choisir selon le résultat souhaité pour être cohérent à la page + lisibilité, je ne dis pas que c'est facile faut tester, mais les % donnent une sorte de float... 

min-height: 100vh pour la hauteur du viewport.

Flexbox et les grilles résous déjà pas mal de soucis, mais j'avoues parfois avoir recours au %, mais c'est des cas particuliers.

Je ne dis pas que c'est la bonne méthode, mais avoir des marges ou des mises en pages en % donnent des comportements peu satisfaisant pour ma part.

Sur mon blog j'utilie ceci par exemple :

    margin-left: 15em;
    color: #fff;
    padding: 5px;

Page centrale du blog :

    width: 50em;
    margin: auto;
    padding: 10px;
    margin-top: 50px;
    background: #333;
    border-radius: 4px;

-
Edité par Lucky13 5 août 2018 à 17:35:02

Le px? ...mais c'est totalement dépendant de la résolution, c'est un coup à finir avec ces sites dégueulasses qui apparaissent en petit dans un quart d'écran sur un écran moderne  (le genre qu'on croisait pas mal dans les années 90 2000)

Ben les propriétés flexbox il utilisent des unités relatives, en nettoyant un peu en effet.

Heu oui mais c'est une valeur fixe contrairement au % que le navigateur doit calculer. je ne parle pas de texte pour les px évidemment...

Ben oui, mais comme c'est fixe, ça varie selon la taille de l'écran...alors que 70% de l'écran (du container parent, wv pour le viewport) ben c'est fixe sur tout support

Je pense que l'on parle de la même chose  

Choisir l'unité, cela dépend si c'est pour la hauteur, du viewport, du texte, des images, des marges, etc...  

Merci à vous deux pour votre aide. 

Pour ceux voudrait des pistes de recherches j'ai trouvé un petit truc sympathique (en complément du lien donné par Lucky13) : http://www.pompage.net/traduction/css-unites-et-usages.