70

私の画面解像度は 1920x1080 であるため、低い画面解像度の高さを取得するのに苦労しています。

画面解像度の高さと幅を取得する方法を知っている人はいますか?

1024x768 の解像度で自分の作品をチェックしたところ、すべてめちゃくちゃにレンダリングされました。

4

9 に答える 9

222

ビューポートのパーセンテージの長さを使用できます。

参照: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

それはこのように動作します：

.element{
    height: 100vh; /* For 100% screen height */
    width:  100vw; /* For 100% screen width */
}

詳細情報は、Mozilla Developer NetworkおよびW3Cからも入手できます。

于 2015-01-09T18:57:23.107 に答える
21

多くの場合、ブラウザはウィンドウ化されており、最大化されたサイズでもブラウザは画面の 100% を占有しないため、実際には画面解像度は必要ありません。必要なのはブラウザのサイズです。

必要なのは、View-port-height と View-port-width です。

<div style="height: 50vh;width: 25vw"></div>

これにより、内部ブラウ​​ザーの高さの 50% と幅の 25% で div がレンダリングされます。

（正直なところ、この回答は@Hendrik_Eichlerが言いたかったことの一部でしたが、彼はリンクを提供しただけで、問題に直接対処しませんでした）

于 2015-12-29T07:07:06.197 に答える
18

CSSから画面の高さを取得することはできません。ただし、CSS3以降を使用すると、メディアクエリを使用して、解像度に従ってテンプレートの表示を制御できます。

メディアクエリを使用して高さに基づいてコーディングする場合は、スタイルシートを定義してこのように呼び出すことができます。

<link rel="stylesheet" media="screen and (device-height: 600px)" />
于 2012-07-17T05:14:16.857 に答える
10

画面の現在の高さと幅を css 変数にバインドできます。この JavaScriptを使用するvar(--screen-x)と、次のようになります。var(--screen-y)

var root = document.documentElement;

document.addEventListener('resize', () => {
  root.style.setProperty('--screen-x', window.screenX)
  root.style.setProperty('--screen-y', window.screenY)
})

これは、こちらの css 変数に関する彼女のトークでの lea verou の例から直接適応されました: https://leaverou.github.io/css-variables/#slide31

于 2016-12-27T17:58:04.777 に答える
1

画面の解像度を取得するには、を使用することもできます。このリンクは、解決に非常に役立ちます。

于 2012-07-17T05:13:01.773 に答える
0

画面解像度を取得するには、CSS の代わりに Javascript を使用する必要があります:screen.height高さとscreen.width幅に使用します。

于 2015-01-09T19:16:47.437 に答える
-10

高さと幅をパーセンテージで使用します。

例えば：

width: 80%;
height: 80%;
于 2012-07-17T06:04:18.660 に答える