html - 在方向更改时加载不同媒体的最佳实践

Question

我在这个主题上做了很多谷歌搜索，但我找不到任何有用的东西。

我的任务是根据我的设计团队提出的设计创建一个移动网站。他们提出的功能之一是根据设备的方向拥有不同版本的图像。因此，对于他们想要对您执行此操作的每个图像，您都有两个版本：

image1Portrait.jpg
image1Landscape.jpg

我正在考虑将这两个图像组合成一个本质上是 Sprite-esk 的图像。当 onorientationchange 事件触发时，我会更改 css，图像基本上会移动并显示正确的版本。

我的另一个选择是简单地将图像源换成横向版本。我不赞成这样做，因为您将不得不等待它下载。

我的问题是：有没有做这种事情的最佳实践？就像我说的，我一直在谷歌搜索，但我没有发现任何有用的东西。

Answer 1

媒体查询是您需要的：

/* Portrait */
@media screen and (orientation:portrait) {
  /* Portrait styles */
}

/* Landscape */
@media screen and (orientation:landscape) {
  /* Landscape styles */
}