スマートフォンのポートレートとランドスケープの両方を同時に対象とするメディアクエリ

Question

スマートフォンに適用したいスタイルが、ポートレートとランドスケープの両方であります。

両方のシナリオを対象とする良好なメディアクエリがありますか？実は私は2つのメディアクエリでCSSを繰り返す必要があります。

.selector { 

// smartphone portrait 
@media (min-width: 320px}) and (max-width: 512px}) { 
    // stuff 
} 

// smartphone landscape 
@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) { 
    // same stuff 
} 

} 

Answer 1

それをあなたが最小幅は縦長の携帯電話の画面の幅であることをメディアクエリを作成し、最大幅は、横長の携帯電話の画面幅という場合、私は信じていますオリエンテーションに関係なくすべてそれをカバーする必要があります。