2

Web ページのメディア クエリを作成していて、480px 以上のメディア クエリを作成できました。しかし、320px のメディア クエリを作成すると、正しく動作しません。ほとんどのモバイル (iphone4、iphone5、iphone3、asus galaxy 7、samsung galaxy sII、samsung galaxy s3) の 320px のポートレート ビューをキャプチャしたいと考えています。私が作成した Web ページは、これらのデバイスで横向きの表示で動作していましたが、縦向きの表示には対応していません。誰でもクエリのエラーを指摘できますか。これは私が使用したメディアクエリです。

@media (max-width: 320px)
{
   html
   {
      font-size:0.1em;
   }

}
@media (max-width: 480px)
{
   html
   {
      font-size:0.20em;
   }
}
@media (max-width: 767px)
{
   html
   {
          font-size:0.38em;
   }
}
@media (min-width: 768px) and (max-width: 979px)
   {
       html
       {
           font-size:0.65em;
       }
   }

   @media (min-width : 980px) and (max-width:1025px)
   {
       html
       {
           font-size:0.7em;
       }
   }

320pxの場合、私も試しました

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait)
{ /*Styles */}

と

@media only screen 
and (max-width : 320px) {
/* Styles */
}

しかし、それらのどれも機能していません。前もって感謝します

4

2 に答える 2

10

480 スタイルには最小幅がなく、これらのスタイルはスタイルシートの後半にあるため、それらの前に置いたものはすべて上書きされます。

@media (max-width: 320px) {
   html {
      font-size:0.1em;
   }
}
@media (min-width: 321px) and (max-width: 480px) {
   html {
      font-size:0.20em;
   }
}
   ...
于 2013-03-28T02:48:59.077 に答える
2

あ

@media (max-width: 320px)
{
   html { font-size:0.1em; }
}

B 

@media (max-width: 480px)
{
 html { font-size:0.20em; }
}

上記を使用して、320px のビューポートを検討してください。

320 は A の制限に達し、B の最大値を大幅に下回るため、A と Bはtrueです。しかし、B はスタイルシートで後で宣言されることによって A をオーバーライドするため、font-size は後の宣言によって決定されます -- B

min-width:321pxB に要件を追加すると、 Bは 320px のビューポートに対して false をテストするように強制されます。そのため、B が true になるまで font-size は 0.1em のままになります (最小幅 321px)。

EDIT（おそらくそれについて考えるより良い方法です）
最大、最大、最大を使用する代わりにmin-width、範囲（タブレットなど）で最適に提供される可能性のあるUIに到達するまで、を利用してみませんか

/* Set a base */
html { font-size:62.5% }

/* iPhone landscape range */
@media (min-width:321px) and (max-width:480px) {
    html { font-size:1.2em }
}

/* larger than iPhone landscape, an in the iPad portrait range */
@media (min-width:481px) and (max-width:768px) {
    html { font-size:1.6em }
}

/* bigger than iPad portrait  */
@media (min-width:769px) {
    html { font-size:2em }
}
于 2013-03-28T03:09:23.620 に答える