1

私はこのトピックについて多くのグーグルを行ってきましたが、役立つものを見つけることができませんでした。

私のデザインチームが思いついたデザインに基づいてモバイルウェブサイトを作成するタスクが与えられました。彼らが思いついた機能の1つは、デバイスの向きに基づいて異なるバージョンの画像を用意することです。したがって、これを実行したい画像ごとに、2つのバージョンがあります。

image1Portrait.jpg
image1Landscape.jpg

2つの画像を1つの画像にまとめて、本質的にスプライト風にすることを考えていました。onorientationchangeイベントが発生したら、cssを変更すると、画像は基本的に移動して正しいバージョンを表示します。

私の他のオプションは、画像のソースを横向きのバージョンに交換することです。ダウンロードするのを待たなければならないので、私はこれに賛成しません。

私の質問はこれです：この種のことを行うためのベストプラクティスはありますか？私が言ったように、私はグーグルをしてきました、しかし私は何も役に立つものを見つけませんでした。

4

1 に答える 1

1

メディアクエリは、これに必要なものです。

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

/* Landscape */
@media screen and (orientation:landscape) {
  /* Landscape styles */
}
于 2012-11-19T16:42:21.683 に答える