javascript - 画面幅を見つけて特定のCSSに適用する方法

Question

ユーザー画面の幅を見つけて、この幅をスタイルに適用する必要があります。

私は持っていcontainerます。

<div id="container">

</div>

JavaScriptまたはその他のオプションを使用して幅をcssに入れる必要があります。

これどうやってするの？？よろしくお願いします。

Answer 1

画面解像度を取得するには、screenオブジェクトを使用します。

document.getElementById("container").style.width = screen.width + "px";

ブラウザー ウィンドウの幅を取得するには (IE6 以下を除くすべてのブラウザーの場合、それ以外の場合は、このクロスブラウザー メソッドを確認してください)、次を使用します。

document.getElementById("container").style.width = window.innerWidth + "px";

また、ドキュメントが完全にロードされたときにのみスクリプトを呼び出す必要があることに注意してください。

デモ: http://jsfiddle.net/DNPNz/

Answer 2

このCSSメディアクエリが最適です。このように書いてください：

@media screen and (max-width: 980px)
 {
      #container{
        background: #ccc;
      }
    }

詳細については、これを確認してくださいhttp://webdesignerwall.com/tutorials/css3-media-queries

Answer 3

あなたが探しているのはこれだと思います。以下のコードは、すべてのブラウザーの幅または高さを取得するのに役立ちます。

function getViewPortSize()
{
    var viewportwidth;
    var viewportheight;

    // Standard browsers
    if (typeof window.innerWidth != 'undefined')
    {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6
    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
    {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    //Older IE
    else
    {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }

    return viewportwidth + "~" + viewportheight;
}

コンテナの幅を設定する

window.onload = function() {
    document.getElementById("container").style.width = your_width_Here;
}

コンテナがjsの前にロードされていることを確認してください。私はそれが正しい構文だと思います

または

ブラウザウィンドウの幅を埋めるために div したいだけだと思います。あなたはただcssを使うことができます

#container { width: 100%; }