1 files changed, 331 insertions, 0 deletions
diff --git a/files/fa/web/css/media_queries/ابزار-تست-رسانه-پاسخگو/index.html b/files/fa/web/css/media_queries/ابزار-تست-رسانه-پاسخگو/index.html
new file mode 100644
index 0000000000..286a3e8ba2
--- /dev/null
+++ b/files/fa/web/css/media_queries/ابزار-تست-رسانه-پاسخگو/index.html
@@ -0,0 +1,331 @@
+---
+title: ابزار تست رسانه پاسخگو
+slug: Web/CSS/Media_Queries/ابزار-تست-رسانه-پاسخگو
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div dir="rtl">{{cssref}}</div>
+
+<p dir="rtl"> ابزارهای تست پاسخگو بسیار مفید هستند، زمانی که می خواهید سبک CSS را طبق نوع کلی دستگاه (مانند اندازه چاپ در مقابل سایز صفحه نمایش)، ویژگی های خاص (مانند عرض مرورگر رسانه) یا محیط (مانند شرایط نور محیط) استفاده کنید. با انواع مختلفی از دستگاه های متصل به اینترنت که امروزه در دسترس ما هستند و با وجود ابزارهای چند رسانه ای با اندازه های بیشمار، ابزار تست پاسخگو رسانه ها یک ابزار حیاتی برای ساخت وب سایت ها و برنامه هایی با سیستم طراحی حرفه ای جهت کار بر روی هر سخت افزاری که کاربران ممکن است با آن کار کنند، بشمار میرود.</p>
+
+<h2 dir="rtl" id="هدف_قرار_دادن_انواع_رسانه_ها"><span class="short_text" id="result_box" lang="fa"><span>هدف قرار دادن انواع رسانه ها</span></span></h2>
+
+<p dir="rtl">انواع رسانه ها دسته کلی یک دستگاه مشخص را توصیف می کنند. اگر چه وبسایت ها معمولا با صفحه نمایش طراحی شده اند، ممکن است بخواهید سبکهایی را ایجاد کنید که دستگاه هایی خاص مانند چاپگرها  یا  صفحه نمایش مبتنی بر صدا را هدف قرار میدهند. به عنوان مثال، این کد CSS  چاپگر ها را هدف قرار میدهد :</p>
+
+<pre class="brush: css">@media print { ... }</pre>
+
+<p dir="rtl">همچنین می توانید به راحتی چندین دستگاه را هدف قرار دهید. به عنوان مثال، دستور<code>@media</code> با استفاده از دو ابزار رسانه پاسخگو، صفحه نمایش و همینطور چاپگر را هدف قرار میدهد:</p>
+
+<pre class="brush: css" dir="rtl">@media screen, print { ... }</pre>
+
+<p dir="rtl"><span id="result_box" lang="fa"><span class="alt-edited">برای مشاهده لیستی از رسانه های مختلف روی<a href="/fa-IR/docs/CSS/@media#Media_types"> انواع رسانه</a> کلید کنید. از آنجایی که دستگاهها را فقط در شرایط بسیار وسیع توصیف می کنند، فقط تعداد کمی از آنها در دسترس هستند؛ برای اختصاص ویژگی های خاص تر، از <em>ویژگی های رسانه</em> استفاده کنید.</span></span></p>
+
+<h2 dir="rtl" id="Targeting_media_features">Targeting media features</h2>
+
+<p><a href="/en-US/docs/CSS/@media#Media_features">Media features</a> describe the specific characteristics of a given {{glossary("user agent")}}, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. This example applies styles when the user's <em>primary</em> input mechanism (such as a mouse) can hover over elements:</p>
+
+<pre class="brush: css"><a href="/en-US/docs/CSS/@media">@media</a> (hover: hover) { ... }</pre>
+
+<p>Many media features are <em>range features</em>, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's {{glossary("viewport")}} is equal to or narrower than 12,450 pixels:</p>
+
+<pre class="brush: css">@media (max-width: 12450px) { ... }</pre>
+
+<p>If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is non-zero. For example, this CSS will apply to any device with a color screen:</p>
+
+<pre class="brush: css">@media (color) { ... }</pre>
+
+<p>If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio:</p>
+
+<pre class="brush: css">@media speech and (aspect-ratio: 11/5) { ... }</pre>
+
+<p>For more media feature examples, please see the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features">reference page</a> for each specific feature.</p>
+
+<h2 id="Creating_complex_media_queries">Creating complex media queries</h2>
+
+<p>Sometimes you may want to create a media query that depends on multiple conditions. This is where the <em>logical operators</em> come in: <code>not</code>, <code>and</code>, and <code>only</code>. Furthermore, you can combine multiple media queries into a <em>comma-separated list</em>; this allows you to apply the same styles in different situations.</p>
+
+<p>In the previous example, we've already seen the <code>and</code> operator used to group a media <em>type</em> with a media <em>feature</em>. The <code>and</code> operator can also combine multiple media features into a single media query. The <code>not</code> operator, meanwhile, negates a media query, basically reversing its normal meaning. The <code>only</code> operator prevents older browsers from applying the styles.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In most cases, the <code>all</code> media type is used by default when no other type is specified. However, if you use the <code>not</code> or <code>only</code> operators, you must explicitly specify a media type.</p>
+</div>
+
+<h3 id="and"><code>and</code></h3>
+
+<p>The <code>and</code> keyword combines a media feature with a media type <em>or</em> other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:</p>
+
+<pre class="brush: css">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<p>To limit the styles to devices with a screen, you can chain the media features to the <code>screen</code> media type:</p>
+
+<pre class="brush: css">@media screen and (min-width: 30em) and (orientation: landscape) { ...  }</pre>
+
+<h3 id="comma-separated_lists">comma-separated lists</h3>
+
+<p>You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680 pixels <em>or</em> is a screen device in portrait mode:</p>
+
+<pre class="brush: css">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
+
+<p>Taking the above example, if the user had a printer with a page height of 800 pixels, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480 pixels, the second query would apply and the media statement would still return true.</p>
+
+<h3 id="not"><code>not</code></h3>
+
+<p>The <code>not</code> keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The <code>not</code> keyword can't be used to negate an individual feature query, only an entire media query. The <code>not</code> is evaluated last in the following query:</p>
+
+<pre class="brush: css">@media not all and (monochrome) { ... }
+</pre>
+
+<p>... so that the above query is evaluated like this:</p>
+
+<pre class="brush: css">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... rather than like this:</p>
+
+<pre class="example-bad brush: css">@media (not all) and (monochrome) { ... }</pre>
+
+<p>As another example, the following media query:</p>
+
+<pre class="brush: css">@media not screen and (color), print and (color) { ... }
+</pre>
+
+<p>... is evaluated like this:</p>
+
+<pre class="brush: css">@media (not (screen and (color))), print and (color) { ... }</pre>
+
+<h3 id="only"><code>only</code></h3>
+
+<p>The <code>only</code> keyword prevents older browsers that do not support media queries with media features from applying the given styles. <em>It has no effect on modern browsers.</em></p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" /&gt;
+</pre>
+
+<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2>
+
+<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features in the future.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-mac-graphite-theme">-moz-mac-graphite-theme</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-maemo-classic">-moz-maemo-classic</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-device-pixel-ratio">-moz-device-pixel-ratio</a> {{deprecated_inline("16")}}</li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-os-version">-moz-os-version</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-touch-enabled">-moz-touch-enabled</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-accent-color-in-titlebar">-moz-windows-accent-color-in-titlebar</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-classic">-moz-windows-classic</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-compositor">-moz-windows-compositor</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-default-theme">-moz-windows-default-theme</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-glass">-moz-windows-glass</a></li>
+ <li><a href="/en-US/docs/Web/CSS/@media/-moz-windows-theme">-moz-windows-theme</a></li>
+</ul>
+
+<h2 id="WebKit-specific_media_features">WebKit-specific media features</h2>
+
+<p id="-webkit-transform-3d">For WebKit-specific media features, please see the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features">reference page</a> for each specific feature.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("21")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("4")}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} <sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>resolution</code></td>
+   <td>{{CompatChrome("29")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}} <sup>[2]</sup><br>
+    {{CompatGeckoDesktop("8.0")}} <sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scan</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[7]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-3d</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatGeckoDesktop("49")}}<sup>[6]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-2d</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transition</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[5]</sup></td>
+   <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("47")}}<sup>[8]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>grid</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>resolution</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scan</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-3d</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transform-2d</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>-webkit-transition</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(47)}}<sup>[8]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>grid</code> media type is not supported.</p>
+
+<p>[2] Supports {{cssxref("&lt;integer&gt;")}} values only.</p>
+
+<p>[3] Supports {{cssxref("&lt;number&gt;")}} values, as per the spec.</p>
+
+<p>[4] <code>tv</code> media type is not supported.</p>
+
+<p>[5] See {{WebKitBug(22494)}}.</p>
+
+<p>[6] Implemented for Web compatibility reasons in Gecko 46.0 {{geckoRelease("46.0")}} behind the preference <code>layout.css.prefixes.webkit</code> defaulting to <code>false</code>. See {{bug(1239799)}}. Since Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> defaults to <code>true</code>.</p>
+
+<p>[7] Implemented as aliases for <code>min--moz-device-pixel-ratio</code> and <code>max--moz-device-pixel-ratio</code> for Web compatibility reasons in Gecko 45.0 {{geckoRelease("45.0")}} (see {{bug(1176968)}}) behind the preferences <code>layout.css.prefixes.webkit</code> and <code>layout.css.prefixes.device-pixel-ratio-webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> defaults to <code>true</code>.</p>
+
+<p>[8] Only the <code>fullscreen</code> and <code>browser</code> values of <code>display-mode</code> were supported in 47. <code>minimal-ui</code> and <code>standalone</code> were added in Firefox 57.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en-US/docs/CSS/@media#Media_types">Media types</a></li>
+ <li><a href="/en-US/docs/CSS/@media#Media_features">Media features</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Testing media queries using code</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a></li>
+</ul>