在方向更改上加载不同介质的最佳做法

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