0

device-width今日まで、タブレットやその他のモバイルデバイスでしか機能しないと思っていました。（あるいは、私が長い間間違っていたのかもしれません...）

.test {
    width: 100px;
    height: 100px;
    padding: 5%;
}

@media only screen and (max-width : 1900px) {
    .test { 
        background: blue;
        color: yellow;
    }
}

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .test { 
        background: #000000; 
        color: #ffffff;
    }
}
<div class="test"> TEST</div>

モニターの解像度を幅 1024x768 に設定すると、以下のメディア クエリが機能します。

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/*...*/
}

device-widthデスクトップ ブラウザーで動作するため、メディア クエリでタブレットとモバイルをターゲットにするにはどうすればよいですか?

4

1 に答える 1

1

@media handheldの代わりに試すことができ@media screenます。

しかし、あなたは再考したいかもしれません。結局のところ、デスクトップであろうとなかろうと、画面サイズが小さい場合でもモバイル レイアウトを表示したい場合があります。デスクトップ バージョンはおそらく高解像度向けに最適化されているからです。これに悩まされているデスクトップユーザーは、より大きな画面を購入する必要があります. ;)

于 2014-12-05T07:29:23.603 に答える