5

max-width と device-pixel-ratio の両方に基づいて包含/除外するルールを作成しようとしています。例としては、Kindle Fire @ 600px を除外したいが、iPhone5 @640 (より小さな実世界の画面) をトリガーする場合があります。

次は AND または OR ルールを作成しますか? OR ルールを作成すると仮定すると、AND タイプの関数を実行するルールを作成するにはどうすればよいでしょうか (トリガーするには、「device-pixel-ratio of 2」と「max-width 749px」の両方のチェックに合格する必要があります)。

@media only screen and (min--moz-device-pixel-ratio: 2), 
        only screen and (-o-min-device-pixel-ratio: 2/1), 
        only screen and (-webkit-min-device-pixel-ratio: 2), 
        only screen and (min-device-pixel-ratio: 2),
        only screen and (max-width: 749px){
        }

以下を編集:

わかりましたこれが私がこれまでに持っているものです-コンマはORであり、「and」は明らかにANDであると推測しています。これは正しいです？iPhone/iPad 以外を対象とした、より普遍的な一連のクエリを作成しようとしています...

@media
only screen and (max-device-width : 721px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (max-device-width : 721px) and (orientation : portrait) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 359px) {
/* All Portrait Phones */
}

@media
only screen and (min-device-width : 360px) and (max-device-width : 999px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-width : 360px) and (max-device-width : 999px) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 999px) {
/* Small tablets (assume vertical) and landscape phones */
}
/*note - Anything over 999 wide to render fully - desktop, landscape or large tablets */
4

2 に答える 2

-2

または、メディア クエリを完全にスキップして、Restive.JS ( http://restivejs.com ) などを使用することもできます。

従来のブレークポイントをまったく使用する必要さえありません。 Form-factorsとOrientationだけに集中できます。

特定のケースのインストールとセットアップは次のようになります。

<!-- Install JQuery version 1.7 or higher -->
<script type="text/javascript" src="jquery.min.js"></script>

<!-- Install Restive Plugin -->
<script type="text/javascript" src="restive.min.js"></script>

<!-- Setup Plugin -->
<script>
$( document ).ready(function() {
    $('body').restive({
        breakpoints: ['10000'],
        classes: ['nb'],
        turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet,is_landscape=landscape'
    });
});
</script>

次に、CSS に戻り、次の行に沿ってマークアップするだけです。

/** For Desktops **/
#sidebar {display: block; float: right; width: 320px;}

/** For Phones **/
.mobi.phone #sidebar {display: none;}

/** For Tablets in Landscape Orientation **/
.mobi.tablet.landscape #sidebar {display: block; width: 35%;}

この方法を使用すると、CSS メディア クエリ ディレクティブを混乱させ、時には不正確にすることなく、直感的な方法で CSS を微調整する柔軟性が得られます。もちろん、ID セレクターの使用は推奨されていませんが、CSS マークアップを整理するのに便利であり、パフォーマンスへの影響はごくわずかです。

完全な開示: 私はプラグインを開発しました

于 2013-12-22T17:21:51.043 に答える