1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
---
title: Pixel CSS
slug: Glossary/CSS_pixel
tags:
- CSS
- Glossaire
- Hauteur
- Largeur
- Longueur
- Pixel CSS
- pixel
- taille
- unité
translation_of: Glossary/CSS_pixel
original_slug: Glossaire/Pixel_CSS
---
<p>Le <strong>pixel CSS</strong>—désigné dans {{Glossary("CSS")}} avec le suffixe <code>px</code>—est une unité de longueur qui correspond approximativement à la largeur ou à la hauteur d'un point unique qui peut être vu confortablement par l'œil humain sans effort mais par ailleurs aussi petit que possible. Par définition, il s'agit de la taille physique d'un seul pixel à une densité de pixels de 96 DPI, situé à une longueur de bras des yeux du spectateur.</p>
<p>Cette définition, bien sûr, laisse beaucoup de marge de manœuvre, car les termes "être vu confortablement" et "à une longueur de bras" sont imprécis et varient d'une personne à l'autre. Lorsqu'un utilisateur est assis à un bureau devant un desktop, l'écran est généralement beaucoup plus éloigné de ses yeux que lorsqu'il est sur un téléphone portable, par exemple.</p>
<p>En tant que tel, il suffit généralement de dire que lorsque l'unité <code>px</code> est utilisée, le but est d'essayer d'avoir la distance <code>96px</code> égale à environ 1 inch sur l'écran, quelle que soit la densité de pixels réelle de l'écran. En d'autres termes, si l'utilisateur est sur un téléphone avec une densité de pixels de 266 DPI, et un élément est placé sur l'écran avec une largeur de <code>96px</code>, la largeur réelle de l'élément serait de 266 {{Glossary("device pixels")}}.</p>
<h2 id="Apprendre_plus">Apprendre plus</h2>
<h3 id="Référence_technique">Référence technique</h3>
<ul>
<li><a href="https://drafts.csswg.org/css-values-3/#absolute-lengths">Module Valeurs et Unités CSS, section 5.2: Longueurs Absolues</a></li>
</ul>
<h3 id="En_savoir_plus">En savoir plus</h3>
<ul>
<li><a href="https://hacks.mozilla.org/2013/09/css-length-explained/">Longueur CSS Expliquée</a> sur le Blog MDN Hacks</li>
</ul>
|
