From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../@media/-webkit-device-pixel-ratio/index.html | 60 ++++++++ files/zh-cn/web/css/@media/any-hover/index.html | 76 ++++++++++ files/zh-cn/web/css/@media/any-pointer/index.html | 108 ++++++++++++++ files/zh-cn/web/css/@media/aspect-ratio/index.html | 120 +++++++++++++++ .../zh-cn/web/css/@media/device-height/index.html | 52 +++++++ files/zh-cn/web/css/@media/hover/index.html | 73 ++++++++++ files/zh-cn/web/css/@media/index.html | 162 +++++++++++++++++++++ files/zh-cn/web/css/@media/orientation/index.html | 94 ++++++++++++ .../web/css/@media/prefers-color-scheme/index.html | 111 ++++++++++++++ .../css/@media/prefers-reduced-motion/index.html | 137 +++++++++++++++++ files/zh-cn/web/css/@media/width/index.html | 126 ++++++++++++++++ 11 files changed, 1119 insertions(+) create mode 100644 files/zh-cn/web/css/@media/-webkit-device-pixel-ratio/index.html create mode 100644 files/zh-cn/web/css/@media/any-hover/index.html create mode 100644 files/zh-cn/web/css/@media/any-pointer/index.html create mode 100644 files/zh-cn/web/css/@media/aspect-ratio/index.html create mode 100644 files/zh-cn/web/css/@media/device-height/index.html create mode 100644 files/zh-cn/web/css/@media/hover/index.html create mode 100644 files/zh-cn/web/css/@media/index.html create mode 100644 files/zh-cn/web/css/@media/orientation/index.html create mode 100644 files/zh-cn/web/css/@media/prefers-color-scheme/index.html create mode 100644 files/zh-cn/web/css/@media/prefers-reduced-motion/index.html create mode 100644 files/zh-cn/web/css/@media/width/index.html (limited to 'files/zh-cn/web/css/@media') diff --git a/files/zh-cn/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/zh-cn/web/css/@media/-webkit-device-pixel-ratio/index.html new file mode 100644 index 0000000000..d3f3cd202c --- /dev/null +++ b/files/zh-cn/web/css/@media/-webkit-device-pixel-ratio/index.html @@ -0,0 +1,60 @@ +--- +title: '-webkit-device-pixel-ratio' +slug: Web/CSS/@media/-webkit-device-pixel-ratio +translation_of: Web/CSS/@media/-webkit-device-pixel-ratio +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

-webkit-device-pixel-ratio 是一个非标准的布尔类型CSS媒体类型，是标准 resolution 媒体类型的一个替代方案.

+ +

Its value is the number of device pixels used to represent each CSS px. Although the value is a {{cssxref("<number>")}} and thus doesn't syntactically allow units, its implicit unit is dppx.

+ +

Syntax

+ +

-webkit-device-pixel-ratio is a range value meaning the prefixed -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio are also available.

+ +
@media (-webkit-min-device-pixel-ratio: 2) { ... }
+/* is equivalent to */
+@media (min-resolution: 2dppx) { ... }
+
+/* And likewise */
+@media (-webkit-max-device-pixel-ratio: 2) { ... }
+/* is equivalent to */
+@media (max-resolution: 2dppx) { ... }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}{{Spec2('Compat')}}Initial standardization
Safari CSS Reference
+ 'media query extensions' in that document.		Non-standard unofficial documentationInitial documentation
+ +

See also

+ + diff --git a/files/zh-cn/web/css/@media/any-hover/index.html b/files/zh-cn/web/css/@media/any-hover/index.html new file mode 100644 index 0000000000..195b19371b --- /dev/null +++ b/files/zh-cn/web/css/@media/any-hover/index.html @@ -0,0 +1,76 @@ +--- +title: any-hover +slug: Web/CSS/@media/any-hover +tags: + - '@media' + - CSS + - Reference + - 媒体查询 + - 媒体特性 +translation_of: Web/CSS/@media/any-hover +--- +
{{cssref}}
+ +

any-hover CSS 媒体特性 可以用来测试是否有任意可用的输入机制可以在元素上 hover。

+ +

语法

+ +

any-hover 使用下面列表的值作为关键字。

+ +
+
none
+
可用的输入机制里没有机制可以方便地 hover，或者不存在定点输入机制。
+
hover
+
一个或多个可用的输入机制可以方便地在元素上 hover。
+
+ +

示例

+ +

测试是否有输入机制可以 hover

+ +

HTML

+ +
<a href="#">Try hovering over me!</a>
+ +

CSS

+ +
@media (any-hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

结果

+ +

{{EmbedLiveSample("Testing_whether_input_methods_can_hover")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}{{Spec2('CSS4 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.any-hover")}}

+ +

更多资料

+ + diff --git a/files/zh-cn/web/css/@media/any-pointer/index.html b/files/zh-cn/web/css/@media/any-pointer/index.html new file mode 100644 index 0000000000..8d05eb28d4 --- /dev/null +++ b/files/zh-cn/web/css/@media/any-pointer/index.html @@ -0,0 +1,108 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - '@media' + - CSS + - Reference + - 媒体查询 + - 媒体特性 +translation_of: Web/CSS/@media/any-pointer +--- +
{{cssref}}
+ +

any-pointer CSS 媒体特性 测试用户是否拥有任意定点装置（如鼠标）。以及如果存在定点装置，它的精确度是什么样的。

+ +
+

注: 如果你想测试主定点设备的精确度, 使用 pointer 。

+
+ +

语法

+ +

any-pointer 特性使用下面的关键字。

+ +
+
none
+
没有可用的定点设备。
+
coarse
+
至少有一个输入途径包含一个精度有限的定点装置。
+
fine
+
至少有一个输入途径包含一个精确的定点装置。
+
+ +
+

注: 当输入设备拥有不同特性时，可能有多于一个的值被匹配。none 仅当它们都不是定点设备时被匹配。

+
+ +

示例

+ +

这个例子为拥有至少一个精确定点装置的用户创建了一个小 checkbox，为拥有至少一个粗略定点装置的用户创建了一个大 checkbox。大 checkbox 的优先级更高，因为它的声明在小 checkbox 的声明后。

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Look at me!</label>
+ +

CSS

+ +
input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (any-pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (any-pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Examples")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}{{Spec2('CSS4 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.any-pointer")}}

+ +

更多资料

+ + diff --git a/files/zh-cn/web/css/@media/aspect-ratio/index.html b/files/zh-cn/web/css/@media/aspect-ratio/index.html new file mode 100644 index 0000000000..d18fb02b2b --- /dev/null +++ b/files/zh-cn/web/css/@media/aspect-ratio/index.html @@ -0,0 +1,120 @@ +--- +title: aspect-ratio +slug: Web/CSS/@media/aspect-ratio +translation_of: Web/CSS/@media/aspect-ratio +--- +
{{cssref}}
+ +

aspect-ratio CSS 媒体属性 可以用来测试 {{glossary("viewport")}} 的宽高比。

+ +

语法

+ +

宽高比属性被指定为{{cssxref("<ratio>")}}值来代表viewport的宽高比。其为一个范围，这意味着你可以使用min-aspect-ratio和max-aspect-ratio分别查询最小和最大的值。

+ +

例子

+ +

下面的例子包含一个 {{htmlElement("iframe")}} ，拥有它自身的viewport。调整的<iframe>宽高来观察aspect-ratio的变化。

+ +

HTML

+ +
<div id='inner'>
+  Watch this element as you resize your viewport's width and height.
+</div>
+
+ +

CSS

+ +
/* 最小宽高比 */
+@media (min-aspect-ratio: 8/5) {
+  div {
+    background: #9af; /* blue */
+  }
+}
+
+/* 最大宽高比 */
+@media (max-aspect-ratio: 3/2) {
+  div {
+    background: #9ff;  /* cyan */
+  }
+}
+
+/* 明确的宽高比, 放在最下部防止同时满足条件时的覆盖*/
+@media (aspect-ratio: 1/1) {
+  div {
+    background: #f9a; /* red */
+  }
+}
+
+ + + +

结果

+ +
+

{{ EmbedLiveSample('_Example', '300px', '400px') }}

+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}No change.
{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.aspect-ratio")}}

diff --git a/files/zh-cn/web/css/@media/device-height/index.html b/files/zh-cn/web/css/@media/device-height/index.html new file mode 100644 index 0000000000..284c9a1b41 --- /dev/null +++ b/files/zh-cn/web/css/@media/device-height/index.html @@ -0,0 +1,52 @@ +--- +title: device-height +slug: Web/CSS/@media/device-height +translation_of: Web/CSS/@media/device-height +--- +
{{cssref}} {{deprecated_header}}
+ +

 device-height CSS media feature 可以用来测试设备的渲染高度。注意，该条媒体查询将会在 媒体查询level4（目前处于候选草案）中废弃

+ +

语法

+ +

device-height feature is specified as a {{cssxref("<length>")}} value. It is a range feature, meaning that you can also use the prefixed min-device-height and max-device-height variants to query minimum and maximum values, respectively.

+ +

例子

+ +

在高度低于800px时加载指定样式

+ +
<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" />
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS4 Media Queries')}}Deprecated in Media Queries Level 4.
{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS3 Media Queries')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.media.device-height")}}

+ +

+ +

diff --git a/files/zh-cn/web/css/@media/hover/index.html b/files/zh-cn/web/css/@media/hover/index.html new file mode 100644 index 0000000000..14c44ff8f7 --- /dev/null +++ b/files/zh-cn/web/css/@media/hover/index.html @@ -0,0 +1,73 @@ +--- +title: hover +slug: Web/CSS/@media/hover +tags: + - '@media' + - CSS + - Reference + - media feature +translation_of: Web/CSS/@media/hover +--- +
{{cssref}}
+ +

该hover CSS {{cssxref("@media")}} 可以根据用户的主要输入机制是否可以悬停在元素之上来应用样式。

+ +

语法

+ +

悬停功能指定为从下面列表中选择的关键字值。

+ +
+
none
+
主要输入机制无法悬停或不方便悬停（例如，当用户执行不方便的长按操作时，许多移动设备模拟悬停），或者没有主指示输入机制。
+
hover
+
主要输入机制可以方便地悬停在元素上。
+
+ +

例子

+ +

HTML

+ +
<a href="#">Try hovering over me!</a>
+ +

CSS

+ +
@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

结果

+ +

{{EmbedLiveSample("Example")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}{{Spec2('CSS4 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.hover")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/@media/index.html b/files/zh-cn/web/css/@media/index.html new file mode 100644 index 0000000000..90a976dd6f --- /dev/null +++ b/files/zh-cn/web/css/@media/index.html @@ -0,0 +1,162 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - '@media' + - '@标签' + - CSS + - 引用 +translation_of: Web/CSS/@media +--- +
{{CSSRef}}
+ +
@media CSS @规则 可用于基于一个或多个 媒体查询 的结果来应用样式表的一部分。 使用它，您可以指定一个媒体查询和一个CSS块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该CSS块才能应用于该文档。
+ +
+ +
+
注： 在JavaScript中，可以使用{{domxref("CSSMediaRule")}}CSS对象模型接口访问使用@media创建的规则。
+ + +
+ +

语法

+ +

@media 规则可置于您代码的顶层或位于其它任何@条件规则组内。

+ +
/* At the top level of your code */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Nested within another conditional at-rule */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+
+ +

有关媒体查询语法的讨论，请参阅使用媒体查询。

+ +

正式语法

+ +
{{csssyntax}}
+ +

媒体特性

+ +

{{page("/zh-CN/docs/Web/Guide/CSS/Media_queries","媒体特性")}}

+ + + +

示例

+ +
@media print {
+  body { font-size: 10pt; }
+}
+
+@media screen {
+  body { font-size: 13px; }
+}
+
+@media screen, print {
+  body { line-height: 1.2; }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (resolution: 150dpi) {
+    body { line-height: 1.4; }
+}
+
+ +

媒体查询第4级引入了一种新的范围语法，在测试接受范围的任何特性时允许更简洁的媒体查询，如下面的示例所示：

+ +
@media (height > 600px) {
+    body { line-height: 1.4; }
+}
+
+@media (400px <= width <= 700px) {
+    body { line-height: 1.4; }
+}
+
+ +

更多示例，请查看使用媒体查询。

+ +

可访问性

+ +

为了最好地调整网站文本大小，当您需要{{cssxref("<length>")}} 进行媒体查询时，请使用em。

+ +

em和px都是有效单位，但如果用户更改浏览器文本大小，em的效果会更好。

+ +

考虑使用4级媒体查询来改善用户体验。 例如，使用prefers-reduced-motion以检测用户是否已请求系统最小化其使用的动画或动作量。

+ +

安全

+ +

由于媒体查询可以洞察用户正在使用的设备的功能（以及扩展的功能和设计），因此有可能滥用它们来构造“指纹”来识别设备，或者至少 将其分类为某些细节，这可能是用户不希望看到的。

+ +

由于存在这种潜力，浏览器可能会选择以某种方式捏造返回的值，以防止它们被用来精确地标识计算机。 浏览器可能还会在此区域提供其他措施。 例如，如果启用了Firefox的“抵抗指纹”设置，则许多媒体查询会报告默认值，而不是代表实际设备状态的值。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationCommentFeedback
{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}Reinstates light-level, inverted-colors and Custom Media Queries, which were removed from Level 4.
+ Adds prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme media features.		CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}Defines the basic syntax of the @media rule.CSS Working Group drafts GitHub issues
{{SpecName('CSS4 Media Queries', '#media', '@media')}} +

Adds scripting, pointer, hover, update, overflow-block, and overflow-inline media features.
+ Deprecates all media types except for screen, print, speech, and all.
+ Makes the syntax more flexible by adding, among other things, the or keyword.

+ 		CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media")}}

+ +

更多资料

+ + diff --git a/files/zh-cn/web/css/@media/orientation/index.html b/files/zh-cn/web/css/@media/orientation/index.html new file mode 100644 index 0000000000..d55e57ccb2 --- /dev/null +++ b/files/zh-cn/web/css/@media/orientation/index.html @@ -0,0 +1,94 @@ +--- +title: orientation +slug: Web/CSS/@media/orientation +tags: + - '@media' + - CSS + - 参考 +translation_of: Web/CSS/@media/orientation +--- +
{{cssref}}
+ +

CSS 媒体属性屏幕方向（orientation）可用于测试视口 {{glossary("viewport")}}（或者对于分页媒体而言的页面框盒）的横纵方向。

+ +
+

注意：此属性不等价于设备的屏幕旋转方向。在许多设备上，当屏幕方向为纵向时，打开软键盘将导致视口 viewport 的宽度大于高度，从而导致浏览器突然改用横向样式，而不是保持纵向。

+
+ +

语法

+ +

orientation 属性被指定为下列关键字值中的任意一个。

+ +

关键字值

+ +
+
portrait
+
viewport 处于纵向，即高度大于等于宽度。
+
landscape
+
viewport 处于横向，即宽度大于高度。
+
+ +

例子

+ +

HTML

+ +
<div>Box 1</div>
+<div>Box 2</div>
+<div>Box 3</div>
+
+ +

CSS

+ +
body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}
+ +

结果

+ +

{{EmbedLiveSample("Example")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS4 Media Queries')}}No change.
{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS3 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.orientation")}}

diff --git a/files/zh-cn/web/css/@media/prefers-color-scheme/index.html b/files/zh-cn/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..cb9c5c422f --- /dev/null +++ b/files/zh-cn/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,111 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - CSS + - Web + - prefers-color-scheme + - 参考 + - 媒体查询 +translation_of: Web/CSS/@media/prefers-color-scheme +--- +

prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

+ +

语法

+ +
+
no-preference
+
表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。
+
light
+
表示用户已告知系统他们选择使用浅色主题的界面。
+
dark
+
表示用户已告知系统他们选择使用暗色主题的界面。
+
+ +
+

译者注：“未得知”、“已告知”等用语，英文原文如此。
+ “未得知”可理解为：浏览器的宿主系统不支持设置主题色，或者支持主题色并默认为/被设为了未设置/无偏好。
+ “已告知”为：浏览器的宿主系统支持设置主题色，且被设置为了亮色或者暗色。

+ +

目前，若结果为 no-preference，无法通过此媒体特性获知宿主系统是否支持设置主题色，或者用户是否主动将其设置为无偏好。出于隐私保护等方面的考虑，用户或用户代理也可能在一些情况下在浏览器内部将其设置为 no-preference。

+
+ +

样例

+ +

这个例子使用了一个有黑色背景和白色文字的元素，当用户使用浅色主题时，会翻转黑白颜色。

+ +

HTML

+ +
<div class="day">Day (initial)</div>
+<div class="day light-scheme">Day (changes in light scheme)</div>
+<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>
+
+<div class="night">Night (initial)</div>
+<div class="night light-scheme">Night (changes in light scheme)</div>
+<div class="night dark-scheme">Night (changes in dark scheme)</div>
+
+ +

CSS

+ +
.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Examples")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
+

{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}

+ 		{{Spec2('CSS5 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.prefers-color-scheme")}}

+ +

参见

+ + + +
{{QuickLinksWithSubpages("/zh-CN/docs/Web/CSS/@media/")}}
diff --git a/files/zh-cn/web/css/@media/prefers-reduced-motion/index.html b/files/zh-cn/web/css/@media/prefers-reduced-motion/index.html new file mode 100644 index 0000000000..49de3de412 --- /dev/null +++ b/files/zh-cn/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,137 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +

CSS 媒体查询特性 prefers-reduced-motion 用于检测用户的系统是否被开启了动画减弱功能。

+ +

语法

+ +
+
no-preference
+
用户未修改系统动画相关特性。
+
reduce
+
这个值意味着用户修改了系统设置，将动画效果最小化，最好所有的不必要的移动都能被移除。
+
+ +

用户偏好

+ +

在火狐中，满足以下条件则 reduce 会生效:

+ + + +

例子

+ +

下面的例子将会展示一组令人心烦的动画，不过当你开启了系统的“减少运动”后就能看到动画减弱的效果了。

+ +

HTML

+ +
<div class="animation">animated box</div>
+
+ +

CSS

+ +
.animation {
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+
+ + + +

Result

+ +

{{EmbedLiveSample("例子")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}{{Spec2('CSS5 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

+ +

参考

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
diff --git a/files/zh-cn/web/css/@media/width/index.html b/files/zh-cn/web/css/@media/width/index.html new file mode 100644 index 0000000000..79b6612aac --- /dev/null +++ b/files/zh-cn/web/css/@media/width/index.html @@ -0,0 +1,126 @@ +--- +title: width +slug: Web/CSS/@media/width +tags: + - '@media' + - CSS + - NeedsBrowserCompatibility + - Reference + - media feature +translation_of: Web/CSS/@media/width +--- +
{{cssref}}
+ +

可以使用width CSS {{cssxref("@media")}} 基于{{glossary("viewport")}}宽度(或页面框，用于paged media)应用样式。

+ +

语法

+ +

该width特性被指定为{{cssxref("<length>")}}，表示viewport宽度的值。这是一个范围特性，也就是说，您也可以使用前缀min-width和max-width分别查询最小值和最大值。

+ +

例子

+ +

HTML

+ +
<div>改变viewport的宽度的同时，观察这个元素的变化。</div>
+ +

CSS

+ +
/* 精确宽度 */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* 最小宽度 */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* 最大宽度 */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

结果

+ +

{{EmbedLiveSample('Example','90%')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#width', 'width')}}{{Spec2('CSS4 Media Queries')}}The value can now be negative, in which case it computes to false.
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}Initial definition. The value must be nonnegative.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
-- cgit v1.2.3-54-g00ecf