Table des matières
Les unités statiques sont gravées dans le marbre. Elles ne bougent pas en fonction de la taille de la fenètre de navigation.
Posons les bases tout de suite : px ne signifie pas pixel. En effet, en fonction de l'écran, les pixels n'ont pas forcément la même taille, car ils deviennent de plus en plus petits à mesure que le technologie évolue.
La légende veut qu'à l'époque des début du développement web, les pixels étaient bien plus gros, et comme il est impossible de faire une forme d'une taille inférieure à 1 pixel, on a choisi de définir la taille d'un px égale à un pixel de l'époque.
Quoiqu'il en soit, le px est aujourd'hui une unité de mesure comme une autre, utile parce qu'elle est très petite. En effet, un px mesure environ 0,25 millimètre.
Cela signifie qu'un bloc ayant une largeur de 1920px mesurera 50,9 cm, et ce quel que soit l'écran.
Tout comme le px, ces deux unités ont une taille précise. La différence est que cette taille change en fonction de la taille de la police.
Imaginons par exemple que vous cherchiez à mettre un peu de margin autour d'un conteneur. Si la taille de police à l'intérieur du conteneur est de 14px, alors mettre 1em de marge aboutira à une marge de 14px.
le rem fonctionne de la même manière, à la différence qu'elle ne se base pas sur la taille police associée à l'élément, mais sur la taille de police définie quand les paramètres. Ainsi, le rem a une taille prédéfinie pour tout les éléments, tandis que l'em a une taille qui s'adapte en fonction de la taille de police de l'élément.
Ces unités de mesure sont plus techniques, et à utiliser uniquement si vous êtes déjà à l'aise avec le développement web.
Ces unités sont conçues pour varier en fonction de la taille de la fenêtre de navigation. Elle sont particulièrement appropriées si vous souhaitez que votre mise en page s'adapte aussi sur mobile et tablette.
Le % signifie que l'élément aura une taille égale à un certain pourcentage du conteneur parent. Prenons une analogie avec une maison :
Par défaut, le conteneur le plus haut sur une page est le cadre inner content, qui n'est éditable que sur le main. Il a de base une largeur de 100%
ATTENTION : lorsque l'on met une taille en %, Oxygen essaie se base sur la taille du conteneur parent. Si elle n'est pas spécifié :
Ces unités fonctionnent sur le même principe que le %, à la différence, qu'il se base non pas sur le conteneur parent, mais sur la taille de la fenêtre :
C'est la même chose pour le champ height. Notez que ces unités peuvent souvent amener à résultats extrème, surtout dans le cas du vh, il est donc recommandé spécifier des width et height maximum et / ou minimum. Ce sujet est abordé dans le guide sur l'onglet Size et Spacing.
Cette option n'est pas à proprement parler une unité de mesure. En théorie, cela signifie que la largeur de l'élément sera déterminée automatiquement en fonction de son contenu.
En pratique, cette option n'est généralement utilisée que pour pour la margin. mettre la margin de gauche en auto maximisera la marge à gauche.
Dit plus simplement, mettre une margin à gauche alignera l'élément le plus à droite possible, et mettre une margin auto en bas enverra l'élément vers le haut de son conteneur. Bien sûr, s'il n'y a plus d'espace libre, cela ne sert à rien.
Mettre une margin auto sur deux côtés contraire permet de centrer le conteneur.
