27

高さと幅、デバイスの幅とデバイスの高さの違いは（簡単に言えば）何ですか？

4

5 に答える 5

24

device-widthそれは...

出力デバイスの幅 (ドキュメント ウィンドウなどのレンダリング領域だけでなく、画面またはページ全体を意味します)。

ソース。

width... _

出力デバイスのレンダリング サーフェスの幅を記述します (ドキュメント ウィンドウの幅、またはプリンターのページ ボックスの幅など)。

ソース。

于 2011-04-19T12:18:32.757 に答える
9

遅い答えよりもそれが役立つことを願っています

CSS メディアでは、幅とデバイス幅の違いが少し混乱する可能性があるため、それについて少し説明しましょう。device-widthは、デバイス自体の幅、つまりデバイスの画面解像度を指し ます。. 画面の解像度が 1440 x 900 だとします。これは、画面の幅が 1440 ピクセルであることを意味するため、デバイス幅は 1440px です。技術的には解像度が 640 x 960 であるにも関わらず、人気の iPhone 4 (デバイス幅: 320px) を含め、ほとんどの携帯電話のデバイス幅は 480px 以下です。これは、画面上の各 CSS ピクセルに 2 つのデバイス ピクセルを詰め込む iPhone 4 の Retina ディスプレイによるものです。これは Ipad 3 にも当てはまります。実際の画面解像度は 1536px x 2048px ですが、報告されたデバイス幅は前任者と同じように 768px です。一般に、レスポンシブ Web ページの作成に関しては、幅の方が汎用性が高くなりますが、特にモバイル デバイスをターゲットにしたい場合 (たとえば、小さなブラウザー ウィンドウを備えたデスクトップではなく) にはデバイス幅が役立ちます。

developer.mozilla.org からのように、

width :
値: メディア: 視覚的、触覚的
最小/最大プレフィックスを受け入れる: はい

幅メディア機能は、出力デバイスのレンダリング サーフェスの幅 (ドキュメント ウィンドウの幅、またはプリンターのページ ボックスの幅など) を表します。

注: ユーザーがウィンドウのサイズを変更すると、幅と高さのメディア機能を使用したメディア クエリに基づいて、ブラウザのスタイル シートが適切に切り替わります。!!!

javascriptkit から非常に興味深いこの記事を見つけました: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

于 2013-08-06T07:57:15.567 に答える
2

定義する場合device-widthは、iphone、ipad、ipod、およびモバイルデバイスでページを開いたときに特定のcssが呼び出されることを意味します。例えば ​​：

@media only screen and (max-device-width:480px){
        body{
          color:red;
        }
    }

または、ウィンドウのサイズが変更されたときに特定のcssが呼び出されることを意味する幅を定義する場合。例えば ​​：

@media only screen and (min-width: 481px) and (max-width: 1024px) {
        body{
         color:yellow;
        }
    }

詳細については、http：//webdesignerwall.com/tutorials/css3-media-queries、http ：//x7.fi/2010/02/12/how-to-fit-your-website-for-the-appleを確認してください。 -ipad /

于 2011-04-19T12:30:46.290 に答える
0

クロスプラットフォーム アプリを作成している場合 (例: phonegap/cordova を使用)、

device-width または device-height を使用しないでください。Android デバイスでは device-width または device-height で問題が発生するため、CSS メディア クエリでは幅または高さを使用してください。iOSの場合、正常に動作します。Android デバイスのみが device-width/device-height をサポートしていません。

于 2014-12-26T07:15:47.707 に答える
-5

はdevice-width、出力デバイスの高さを示します (ドキュメント ウィンドウなどのレンダリング領域だけでなく、画面またはページ全体を意味します)。

一方、heightCSS プロパティは要素のコンテンツ領域の高さを指定します。コンテンツ領域は、要素のパディング、ボーダー、およびマージンの内側にあります。

ソース: https://developer.mozilla.org/en/CSS/

メディア クエリの詳細については、http ://www.w3.org/TR/css3-mediaqueries/ を参照してください。

于 2011-04-19T12:19:30.547 に答える