diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html')
-rw-r--r-- | files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html new file mode 100644 index 0000000000..ed5c585a7e --- /dev/null +++ b/files/zh-cn/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html @@ -0,0 +1,133 @@ +--- +title: width +slug: Web/CSS/@viewport/width +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/width +--- +<div>{{CSSRef}}</div> + +<p>The <strong>width</strong> CSS descriptor is shorthand for setting both the <a href="/zh-CN/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a> and the <a href="/zh-CN/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a> descriptors of the viewport. By providing one viewport length value, that value will determine both the <code>min-width</code> and the <code>max-width</code> to the value provided.</p> + +<p>If two viewport values are provided the first value will be set to the <code>min-width</code> and the second value will be set <code>max-width</code>.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush: css">/* An example with one viewport value: */ +@viewport { + width: 320px; +} + +/* An example with two viewport values: */ +@viewport { + width: 320px, 120px; +} + +</pre> + + + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>The used value is calculated from the other CSS descriptors' values.</dd> + <dt><code><length></code></dt> + <dd>A non-negative absolute or relative length.</dd> + <dt><code><percentage></code></dt> + <dd>A percentage value relative to the width or height of the <span class="css">initial viewport</span> at zoom factor 1.0, for horizontal and vertical lengths respectively. Must be non-negative.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">auto <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><length></a> <a href="https://developer.mozilla.org/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar">|</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/percentage" title=""><percentage></a></pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="height: 93px; width: 950px;"> + <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>29 (behind a flag)</td> + <td>{{CompatNo}}</td> + <td>10 {{property_prefix("-ms")}}</td> + <td>11.10<br> + Removed in 15<br> + Reintroduced behind a flag in 16</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="height: 93px; width: 948px;"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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> + <table class="compat-table"> + <tbody> + <tr> + <td>4.4</td> + </tr> + </tbody> + </table> + </td> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>29</td> + </tr> + </tbody> + </table> + </td> + <td>{{CompatNo}}</td> + <td>10{{property_prefix("-ms")}}</td> + <td>11.10<br> + Removed in 15<br> + Reintroduced behind a flag in 16</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> |