Disposition réactive - PX, EM ou%?

Je suis la construction d'un réactif de mise en page et il fonctionne très bien jusqu'à présent, mais j'ai une question:

Dois-je utiliser em, px ou %?

Par exemple, je veux avoir un border radius appliquée à un élément. Dois-je utiliser ce code:

border-radius: 1.563em;

Ou ceci:

border-radius: 25px;

Dois-je utiliser ems pour des propriétés semblables ou dois-je coller avec px?

source d'informationauteur L84

  1. 21

    Généralement, ne pas utiliser de px pour des mises en forme réactives.

    Si vous utilisez un pxà base media query, puis votre mise en page pourrait finir par ressembler à de la merde quand l'utilisateur zoome. Et malheureusement, que je connais bien parce que j'ai fait cette erreur aussi.

    Concernant votre exemple avec border-radiusvous pouvez découvrir les deux ont l'air vraiment différent lorsque l' font-size est augmenté - démo. La première et la troisième utilisation px pour border-radius, tandis que la deuxième et la quatrième utilisation em.

    Mais il y a des exceptions et si quelque chose ne se sent pas le droit de zoom (par exemple, un box-shadow qui semble exagéré), essayer avec px.

    Également vérifier cet article.

  2. 7

    Juste pour info, si cela peut aider, il est possible d'utiliser rem . Il résout le problème de la "cascade" taille em. Si vous définissez 

    body { font-size :62.5 %; } /* Trick to have 1em =10px */

li {font-size:1.4em; }

    votre <li> sera 14px, mais si vous avez une liste dans une liste, le deuxième niveau de <li> sera à 20px, et au troisième niveau sera 27px, etc..
    Avec rem ( signifie "racine em" ), tous les <li> sont à la taille que vous définissez.

    Plus d'infos : http://snook.ca/archives/html_and_css/font-size-with-rem

    et http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem ( en français )