html - 縦向きと横向きの @media 画面

Question

レスポンシブ テンプレートを使用して Web サイトを構築していますが、その一部を画面の縦向きと横向き (iPhone など) 用にカスタマイズしたいと考えています。だから私はcssに書く

@media screen and (max-width: 320px) {...}

そしてこの後

@media screen and (max-width: 480px) {...}

エミュレーターでサイトをテストしましたが、どちらの場合も 2 番目のルールがトリガーされました..なぜですか? 私はsthが恋しいですか？

Answer 1

はい、

たとえば、幅が 240 の場合、次のようになります。

240 <= 320 の場合、最初の 1 つがトリガーされます。

と

240 <= 480 の場合、2 つ目がトリガーされます。

min-width2番目のものに加えて使用してください:)

組み込みのportraitand を使用することもできlandscapeます。

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)