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

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 */
}