Post by 立即从纵向切换到横向 on Dec 2, 2023 4:35:05 GMT
图像可以自动调整，并且我们有解决方法，以便布局永远不会中断（尽管它们可能会在此过程中被压碎并变得难以辨认）。尽管这不是一个完整的解决方案，但该解决方案为我们提供了更多选择。它非常适合立即从纵向切换到横向的设备，或者当用户从大电脑屏幕切换到 iPad 时。 整个设计是流体网格、流体图像和必要时智能标记的完美结合。创建流体网格是一种相当常见的做法，并且有多种创建流体图像的技术： 隐藏和显示部分图像 创建浮动复合图像 随布局缩放的前景图像 Filament Group 响应式网站设计中的图片 这项由 Filament Group 推出的技术考虑到了这个问题，并且不会按比例调整图像大小。它还缩小了较小设备上的图像分辨率。因此，非常大的图像不会在小屏幕上占用不必要的空间。 您可以在此处查看演示页面。
该技术需要多个文件，所有这些文件都可以在 Github 上找到。 首先，获取 JavaScript 文件 ( rwd-images.js )、.htaccess 文件和图像文件 ( rwd.gif )。然后我们可以使用一点 HTML 来引 电话号码清单 用更大和更小分辨率的图像：首先，带有 .r 前缀的缩略图来描述它应该响应的内容，然后您需要使用 data-fullsrc 代码来引用更大的图像。 <img src="smallRes.jpg" data-fullsrc="largeRes.jpg" /> 这data-fullsrc是上面链接的文件中定义的特殊 HTML5 功能。 对于大于 480 像素的屏幕， 将加载较大分辨率的图像 ( largeRes.jpg )；较小的屏幕不需要加载较大的图像，因此 会加载较小的图像（ smallRes.jpg ）。 JavaScript 文件添加了一个原语，允许页面区分响应式图像和其他图像并相应地重定向它们。
加载页面时，所有文件都将重写为其原始形式，并且仅根据需要加载大或小图像。 使用其他技术时，即使从未使用过较大的版本，也必须下载所有高分辨率图像。特别是对于有大量图像的网站，这种技术可以节省大量的带宽和加载时间。 该技术在IE8+、Safari、Chrome 和 Opera 等现代浏览器 以及 使用相同浏览器的移动设备（iPad、iPhone 等）中得到完全支持。旧版浏览器和 Firefox 仍然会按照响应式图像的预期调整大小，只不过两种分辨率是一起下载的，因此这种技术节省空间的最终好处被抵消了。
该技术需要多个文件，所有这些文件都可以在 Github 上找到。 首先，获取 JavaScript 文件 ( rwd-images.js )、.htaccess 文件和图像文件 ( rwd.gif )。然后我们可以使用一点 HTML 来引 电话号码清单 用更大和更小分辨率的图像：首先，带有 .r 前缀的缩略图来描述它应该响应的内容，然后您需要使用 data-fullsrc 代码来引用更大的图像。 <img src="smallRes.jpg" data-fullsrc="largeRes.jpg" /> 这data-fullsrc是上面链接的文件中定义的特殊 HTML5 功能。 对于大于 480 像素的屏幕， 将加载较大分辨率的图像 ( largeRes.jpg )；较小的屏幕不需要加载较大的图像，因此 会加载较小的图像（ smallRes.jpg ）。 JavaScript 文件添加了一个原语，允许页面区分响应式图像和其他图像并相应地重定向它们。
加载页面时，所有文件都将重写为其原始形式，并且仅根据需要加载大或小图像。 使用其他技术时，即使从未使用过较大的版本，也必须下载所有高分辨率图像。特别是对于有大量图像的网站，这种技术可以节省大量的带宽和加载时间。 该技术在IE8+、Safari、Chrome 和 Opera 等现代浏览器 以及 使用相同浏览器的移动设备（iPad、iPhone 等）中得到完全支持。旧版浏览器和 Firefox 仍然会按照响应式图像的预期调整大小，只不过两种分辨率是一起下载的，因此这种技术节省空间的最终好处被抵消了。