5

HTML5 BoilerPlate を使用しています。

特定のブロックのフォント サイズをモバイル デバイスでのみ小さくしたい。

私はこれを試しましたが、うまくいきませんでした：

.searchresult {
    font-size: 0.5em;
    line-height: 1.4;
}
@media only screen and (min-width: 480px) {
    .search-result {
        font-size: 1em;
    }
}
@media only screen and (min-width: 768px) {
    .search-result {
        font-size: 1em;
    }
}
@media only screen and (min-width: 1140px) {
    .search-result {
        font-size: 1em;
    }
}

の下の普通のサイズにすればうまくいくと思っ@mediaたのですが、私のMacとモバイルではフォントが小さくなっています。

助けていただければ幸いです、ありがとう！

4

2 に答える 2

3

小型デバイスをターゲットにしたい場合は、この構文を使用できます。

@media only screen and (max-device-width: 480px) {
 .search-result {
    font-size: 1em;
 }
}

メディア クエリについて詳しく知りたい場合は、こちらを参照してください。その他の携帯端末の一覧はこちらです。こちらも参考になると思います。

于 2013-03-11T08:37:21.780 に答える
3

それはあなたが使用しているからですmin-width

あなたの Mac (おそらく大画面) & モバイルは min-width 480& 768&1140です。

モバイル用とデスクトップ用に異なるものにするには、これを行う必要があります（実際のコードを保持します）：

.searchresult {
    font-size: 0.5em;
    line-height: 1.4;
}
@media only screen and (min-width: 480px) {
    .search-result {
        font-size: 1em;/* mobile font-size */
    }
}
@media only screen and (min-width: 768px) {
    .search-result {
        font-size: 1.4em;/*overrule for big screens*/
    }
}
@media only screen and (min-width: 1140px) {
    .search-result {
        font-size: 1.4em;/*another overrule for even bigger screens*/
    }
}
于 2013-03-11T08:39:56.093 に答える