如何根據瀏覽器窗口大小更改網站背景

我正在瀏覽一個網站，如果瀏覽器窗口小於一定大小，背景的一部分會與文本衝突。在瀏覽器窗口小於一定數量後可以更改背景嗎？如何根據瀏覽器窗口大小更改網站背景

2013-09-24 Noah Little

您可以勾選window.onresize事件來檢查窗口的寬度和高度，然後根據這些值可以將背景顏色設置爲您所期望的。

window.onresize = function(event) { 
    var height = window.innerHeight; 
    var width = window.innerWidth; 
}

該溶液可以在其他瀏覽器IE兼容性問題並且因此jQuery功能可能是更者優先：

$(window).resize(function() { 
    var height = $(this).height(); 
    var width = $(this).width(); 
});

編輯：（實施例提供）

<script type="text/javascript"> 
     window.onresize = function (event) { 
      var height = window.innereight; 
      var width = window.innerWidth; 

      if (width < 500 || height < 500) { 
       document.getElementById('Div1').style.backgroundColor = '#FF0000'; 
      } 
     } 

//OR WITH JQUERY 

     $(window).resize(function() { 
      var height = $(this).height(); 
      var width = $(this).width(); 

      if (width < 500 || height < 500) { 
       $('#Div1').css('background-color', '#FF0000'); 
      } 
     }); 
    </script> 

    <div id="Div1" style="width: 300px; height: 300px;"> 
     test div 
    </div>

請注意，在Chrome中使用innerHeight屬性時該值作爲未定義返回，所以這似乎不被支持。 jQuery方法將是首選解決方案。

來源

2013-09-24 22:46:06 Nunners

我很新的HTML，JavaScript，CSS和所有，所以如何實現這個到我的HTML網頁？例？ –

更新後的一個例子，也注意到最初的window.onresize例子似乎不是跨瀏覽器（我在Chrome中遇到了問題），所以jQuery方法將是建議的解決方案。 – Nunners

如果您的背景是圖片，您需要做些什麼來修改html？例如。;

你會如何改變'landscape.jpg'？順便說一句，非常感謝您的幫助！ –

如何根據瀏覽器窗口大小更改網站背景

回答

相關問題