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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: <resolution>
slug: Web/CSS/resolución
tags:
- CSS
- CSS tipo de datos
- Diseño
- Estilos
- Referencia
translation_of: Web/CSS/resolution
---
<div>{{CSSRef}}</div>
<h2 id="Summary" name="Summary">Resumen</h2>
<p>El tipo de dato <a href="/en-US/docs/Web/CSS">CSS</a> <code><resolution></code>, usado en <a href="/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a>, define la densidad de píxeles de un dispositivo de salida, su resolución. Es un {{cssxref("<number>")}} inmediatamente seguido por una unidad de resolución (<code>dpi</code>, <code>dpcm</code>, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.</p>
<p>En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.</p>
<p>Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un {{cssxref("<length>")}}: <code>0</code> es inválida y no representa <code>0dpi</code>, <code>0dpcm</code>, ni <code>0dppx</code>.</p>
<h2 id="Units" name="Units">Unidades</h2>
<dl>
<dt><code><a name="dpi">dpi</a></code></dt>
<dd>Esta unidad representa el número de <a href="http://en.wikipedia.org/wiki/Dots_per_inch">dots per inch</a> (ppp en español), puntos por pulgada . A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, <code>1dpi ≈ 0.39dpcm</code>.</dd>
<dt><code><a name="dpcm">dpcm</a></code></dt>
<dd>Esta unidad representa el número de <a href="http://en.wikipedia.org/wiki/Dots_per_centimetre">dots per centimeter</a> (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm, <code>1dpcm ≈ 2.54dpi</code>.</dd>
<dt><code><a name="dppx">dppx</a></code></dt>
<dd>Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por {{cssxref("image-resolution")}}.</dd>
</dl>
<h2 id="Examples" name="Examples">Ejemplos</h2>
<p>Éstos son algunos de los usos correctos de valores <code><resolution></code>:</p>
<pre>96dpi Uso correcto: a {{cssxref("<number>")}} (here an {{cssxref("<integer>")}}) followed by the unit.
@media print and (min-resolution: 300dpi) { ... } El uso correcto en el contexto de una <a href="/en-US/docs/Web/Guide/CSS/Media_queries">media query</a>.
</pre>
<p>Here are some incorrect uses:</p>
<pre>72 dpi Incorecto: no hay espacios entre {{ cssxref("<number>") }} y la unidad.
ten dpi Incorecto: sólo deben ser utilizados dígitos.
0 Incorecto: la unidad se puede omitir por 0 sólo para valores {{ cssxref("<length>") }}.
</pre>
<h2 id="Specifications" name="Specifications">Especificación</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>Factorización del tipo en una especificación más genérica. Ningún cambio</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td>Añadida la unidad <code>dppx</code></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}</td>
<td>{{Spec2('CSS3 Media Queries')}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>29</td>
<td>3.5 (1.9.1)<sup>[1]</sup></td>
<td>9</td>
<td>9.5</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
</tr>
<tr>
<td><code>dppx</code></td>
<td>29</td>
<td>{{CompatGeckoDesktop("16.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>12.10</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
</tr>
<tr>
<td><code>dppx</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("16.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>12.10</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Antes de Firefox 8 (Gecko 8.0), era erroneamente aceptado sólo dimensiones CSS que fueran {{cssxref("<integer>")}} seguidos por la unidad. A partir de esa versión, es compatible con cualquier dimensión ({{cssxref("<number>")}} CSS válido seguido inmediatamente por la unidad).</p>
<p>[2] El Webkit engine no soporta resolución CSS en la especificación, es necesario el uso del no estandar <code>device-pixel-ratio</code> query para el navegador Safari, ver <a href="https://bugs.webkit.org/show_bug.cgi?id=16832">bug 16832</a>.</p>
<h2 id="See_also" name="See_also">Ver también</h2>
<ul>
<li><a href="/en-US/docs/Web/Guide/CSS/Media_queries">CSS Media Queries</a></li>
</ul>
|
