diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md index 2b52c632cb0c7d..56dae203f528ec 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md +++ b/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -98,7 +98,7 @@ SVG 除了前面描述的以外还有其他优点: ### 快捷方式:`img` 元素 -要通过 {{htmlelement("img")}} 元素嵌入 SVG,你只需要按照预期的方式在 src 属性中引用它。你将至少需要 `height` 或 `width` 属性中的一个(或者如果你的 SVG 没有固有的宽高比,则都需要)。如果你还没使用过 `img` 元素,请阅读 [HTML 中的图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)教程。 +要通过 {{htmlelement("img")}} 元素嵌入 SVG,你只需要按照预期的方式在 src 属性中引用它。你将至少需要 `height` 或 `width` 属性中的一个(或者如果你的 SVG 没有固有的{{glossary("aspect ratio","宽高比")}},则都需要)。如果你还没使用过 `img` 元素,请阅读 [HTML 中的图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)教程。 ```html 等边三角形 @@ -274,12 +274,12 @@ window.addEventListener("load", updateCode); // 转而使其在当前光标位置插入一个制表符 textarea.onkeydown = function (e) { - if (e.keyCode === 9) { + if (e.code === "Tab") { e.preventDefault(); insertAtCaret("\t"); } - if (e.keyCode === 27) { + if (e.code === "Escape") { textarea.blur(); } }; diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md index 2e8ef4f9607f27..a59523ed1719f5 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md +++ b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md @@ -102,7 +102,7 @@ web 刚面世时,这样的问题并不存在,在上世纪 90 年代早期至 3. 当媒体条件为真时,图像将填充的**插槽的宽度**(`480px`) > [!NOTE] -> 对于插槽的宽度,你可以不提供绝对宽度(如 `480px`),而是提供相对于视口的宽度(如 `50vw`),但不能提供百分比。你也许已经注意到最后一个插槽的宽度是没有媒体条件的(当没有任何一个媒体条件为真时,它默认生效)。在浏览器成功匹配某一个媒体条件之后,剩下所有的条件都会被忽略,所以要注意媒体条件的顺序。 +> 在 `sizes` 中,可以使用任何[长度值](/zh-CN/docs/Web/CSS/length)。例如,与其提供绝对宽度(如 `480px`),不如提供相对于视口的宽度(如 `50vw`),但不能提供百分比。你也许已经注意到最后一个插槽的宽度是没有媒体条件的(当没有任何一个媒体条件为真时,它默认生效)。在浏览器成功匹配某一个媒体条件之后,剩下所有的条件都会被忽略,所以要注意媒体条件的顺序。 有了这些属性后,浏览器会: @@ -125,7 +125,9 @@ web 刚面世时,这样的问题并不存在,在上世纪 90 年代早期至 ### 分辨率切换:相同的尺寸,不同的分辨率 -如果你要支持多分辨率显示,但希望每个人在屏幕上看到的图片的实际尺寸是相同的,你可以使用 `srcset` 结合 x 描述符(一种更简单的语法),而不用 `sizes`,来让浏览器选择合适分辨率的图片。你可以参考这个示例 [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)(或查看[源代码](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)): +假如有一张图片,在不同屏幕分辨率下,以相同的实际尺寸显示。通过提供高分辨率版本的图片,可以在高分辨显示器上提供更好的用户体验。 + +为此,你可以使用 `srcset` 结合 x 描述符(一种更简单的语法),而不用 `sizes`,来让浏览器选择合适分辨率的图片。你可以参考这个示例 [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)(或查看[源代码](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)): ```html Elva dressed as a fairy ``` +请注意,即使图片仍然以相同的尺寸显示,但在高分辨率显示器下,可以看到等多细节。 + ![一张照片,内容是一个小女孩打扮成仙女,图像应用了老式相机胶片效果](resolution-example.png) 在这个例子中,下面的 CSS 会应用在图片上,所以它在屏幕上的宽度是 320 像素(也称作 CSS 像素):