1

ブラウザが特定の高さより上または下にある場合、次のコードを使用して別のスタイルシートを選択しています。ページにアクセスしたとき、またはウィンドウのサイズを変更してから更新すると、うまく機能します。しかし、ウィンドウのサイズが変更されたときに、これを微調整してその場で正しいスタイル シートを選択する方法はありますか?

if (window.innerHeight <= 900) {
    loadcss('css/container_sm.css');
} else {
    loadcss('css/container_lg.css');
}

function loadcss(file) {
    var el = document.createElement('link');
    el.setAttribute('rel', 'stylesheet');
    el.setAttribute('type', 'text/css');
    el.setAttribute('href', file);
    document.getElementsByTagName('head')[0].appendChild(el);
}
4

4 に答える 4

1

おそらく、 twitter bootstrapなどの既存のライブラリを調べる価値があるでしょうか? ウィンドウのサイズが変更されると自動的に調整されるレスポンシブ スタイルシートがすぐに利用できます。

于 2012-05-15T08:21:52.760 に答える
0

スクリプトにイベント ハンドルを追加できます。jqueryで

$(window).resize(function(){
   if (window.innerHeight <= 900) {
    loadcss('css/container_sm.css');
   } else {
    loadcss('css/container_lg.css');
   }

})

jquery window.onresize = function(){} なし

于 2012-05-15T08:17:39.943 に答える
0

これが私たちがしなければならないことです：

  1. ブラウザーのサイズを変更するたびに、サイズ変更によってブラウザーの高さが小さい (<= 900px) から大きい (> 900px) に、またはその逆に変化したことを確認します。これが発生していない場合、たとえばユーザーが 600px から 601px にのみサイズ変更した場合、CSS を置き換える必要はありません。
  2. ブラウザーが小さいサイズから大きいサイズに、またはその逆にサイズ変更されたことを検出すると、古いcontainer_lg.cssorを慎重に選択してcontainer_sm.css削除します。
  3. 次に、適切な CSS を追加します。

コードは次のとおりです。

var SMALL = 0;
var BIG = 1;
var previousSize = null;
var thresholdHeight = 400;
var firstCall = true;;

function selectCSS()
{
    if ((previousSize == null || previousSize == BIG) &&
         window.innerHeight <= thresholdHeight) {

        removeOldCSS();
        loadNewCSS('css/container_sm.css');
        previousSize = SMALL;

    } else if ((previousSize == null || previousSize == SMALL) &&
                window.innerHeight > thresholdHeight) {

        removeOldCSS();
        loadNewCSS('css/container_lg.css');
        previousSize = BIG;
    }
}

function removeOldCSS(file)
{
    var headNode = document.getElementsByTagName('head')[0];
    var linkNodes = document.getElementsByTagName('link');
    for (var i = 0; i < linkNodes.length; i++) {
        var linkNode = linkNodes[i];
        if (linkNode.parentNode == headNode &&
            linkNode.href.search(/css\/container_(?:sm|lg).css$/) >= 0) {

            headNode.removeChild(linkNode);
        }
    }
}

function loadNewCSS(file)
{
    var el = document.createElement('link');
    el.setAttribute('rel', 'stylesheet');
    el.setAttribute('type', 'text/css');
    el.setAttribute('href', file);
    document.getElementsByTagName('head')[0].appendChild(el);
}

window.onload = selectCSS;
window.onresize = selectCSS;
于 2012-05-15T08:21:49.653 に答える
0

これを試して：

document.body.onresize = function (){
    if (window.innerHeight <= 900) {
        loadcss('css/container_sm.css');
    } else {
        loadcss('css/container_lg.css');
    }
};
于 2012-05-15T08:22:12.153 に答える