0

モバイルでは機能する次のメディア クエリがありますが、デフォルトではデスクトップでは機能しません。

@media (min-width:481px) {
.header-section { width: auto; }
.search-block { display:none; }
}
@media (min-width:320px) {
.header-section { width: auto; }
.search-block { display:none; }
}

これらはモバイルでは機能しますが、デスクトップで表示すると、メディアクエリの下ではなく下に表示されるデフォルトの CSS が機能しません。Google インスペクターでは、これらのルールの media="all" を確認できますが、それでも機能しません。動作せず、モバイル向けのメディア クエリを適用します。何か案は？

.search-block {
width: 500px;
float: left;
margin-top: 5px;
margin-left: 30px;
}
4

2 に答える 2

1

メディア フィーチャとしてのみ 指定すると、幅が320pxを超えるすべてのメディア タイプが対象になります。これは、デスクトップ ブラウザの幅が 320px 未満でない限り、このスタイルが適用されることを意味します。(min-width:320px)

320px がどのように見えるかを示すために、320x320 のプレースホルダー画像を次に示します。ブラウザがこの画像を完全に表示できない場合、メディア クエリは常に有効になります。

320px の例

スマートフォン (幅が 320px より大きい) のみをターゲットにしたい場合はmax-width、現在のクエリにメディア機能を追加して、幅が 480px より大きいメディア タイプにスタイルが適用されないようにする必要があります。

@media (min-width:320px) and (max-width:480px) {
    .header-section { width: auto; }
    .search-block { display:none; }
}

480px は一般的なスマートフォンの最大幅であり、すべてのスマートフォンのガイドラインではありません。

これを実際に示すために、この JSFiddle demoを作成しました。

このデモでは、2 つの仕切りを追加example1しましexample2た。メディア クエリexample1内にのみ含まれ、クエリに含まれます。JSFiddle の結果フレームの幅が 100px から 200px の間でない限り、常に緑色になります。一方、フレームの幅が 100px 未満でない限り、常に赤になります。min-widthexample2max-widthexample2example1

于 2013-10-12T13:10:38.677 に答える
0

@media クエリの順序は CSS で重要です

最小のディスプレイの役割を作成してから、次に最大のディスプレイを作成するのに役立ちました。最後に最大の画面を照会するまで続きます。

例：

.your-class{
  width: 50%
}
@media (min-width: 480px){
  .your-class{
    width: 33%
  }
}
@media (min-width: 768px){
  .your-class{
    width: 25%
  }
}

あなたが取ることを好む場合はmax-width、最大の画面から最小の画面への順序を逆にしてください

于 2015-05-08T15:23:00.027 に答える