5

CSS3機能に関するいくつかの質問に対する回答を探しています- Media Queries：

  1. さまざまな解像度のcssルールを宣言するには、（パフォーマンスのためにブラウザーにとって）どちらの方法が適していますか？

    //this in head:
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />

//or this in css file:
@media only screen and (max-width: 1024px){
    //styles here
}

  2. max-device-widthとの違いは何max-widthですか？モバイル（max-device-width）またはデスクトップ（max-width）ブラウザのみに対応するルールですか？

  3. 1280x800ユーザーがポートレート/ランドスケープモードも使用できる解像度のタブレット用のメディアクエリルールを作成した場合、どのように表示されますか？ルールを書く必要がありますかmax-width: 800px、max-width: 1280pxそれとも別の方法がありますか？

  4. ルールを書く場合は、次のように書く必要があります。

    <link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... />

    または代わりにこの2つ：

    <link ... media="only screen and (max-device-width: 480px) ... />
<link ... media="only screen and (max-device-width: 1024px) ... />


PSスペルや文法の間違いをお許しください。英語は私の母国語ではありません

。P.SSこの質問を投稿する前に、stackoverflowを検索しましたが、この質問に関する情報が見つかりませんでした。私が間違っていて、同様の質問がある場合は、投稿を削除します。

4

2 に答える 2

5

  1. リクエストの数を減らすためのcssファイルのルール（パフォーマンスの向上）。

    • max-widthターゲット表示領域の幅です

    • max-device-widthデバイスのレンダリング領域全体の幅です

3.ポートレートまたはランドスケープをターゲットにするもう1つの方法は、次のorientationように追加することです。

/* portrait */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {
    /* styles here */
}

/* landscape */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape) {
    /* styles here */
}

4.幅が320〜480ピクセルのモバイルデバイスのスタイルシートを定義するには、次のように記述する必要があります。

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css">

// 1等号がありませんでした、6文字の制限未満。Mods、これを削除してください。ありがとう

于 2013-02-19T10:39:19.060 に答える
0

レスポンシブデザインのベストプラクティスに関する優れた情報を探しています。アドバイスを提供します。

この質問では、開発者はCSSポートレート条件を使用し、ドキュメントの入力テキストを選択したときにキーボードを表示させると問題が発生します。理由はわかりませんが、ポートレートの状態が崩れます。

このWebサイトでは、メディアクエリを作成する際のより良い方法に関する情報を見つけることができます。これは私が最善だと思います。個人的には、自分のWebサイトで排他的タイプのメディアクエリを使用します。

しかし一方で、このサイトの推奨事項に従うこともできます。それらは正しいと思いますが、私は人気のあるデバイスディメンションメディアクエリを自分で作成して使用することを好みます。

リストは次のとおりです。

  • <480px（これは古いスマートフォンの画面サイズに適用されます）
  • <768px、これは大型のスマートフォンや小型のタブレットに最適です

  • 768px。これは、大きなタブレット画面やデスクトップ画面など、より大きなものすべてに適用されます。

また、エネルギーと時間があれば、これらも使用できます。

  • <320px、これは古い小型で低解像度の電話に最適です

  • デスクトップのワイドスクリーン用の1024pxスタイルシート。

お役に立てば幸いです。

于 2015-12-18T17:10:01.907 に答える