如果屏幕分辨率寬度> 1028，則添加背景img

Question

嗨，大家好，

我對javascript很陌生。 如果屏幕分辨率寬度大於1028px，我有一個非常簡單的腳本來添加背景圖像。

不幸的是，在嘗試此操作（在另一台分辨率為800x600的計算機上）后，此方法不起作用。

我不希望拉伸圖像，只是在屏幕分辨率寬度大於或等於1024時簡單地添加它。

這是代碼：

    <SCRIPT language="JavaScript">
    <!--
    document.write('<style type="text/css">div#container_header_body {background-image:url(\'');
    if (screen.width<1024)
    {
     document.write('none;');
    }
    else
    {
      document.write('images/mmmgirl.png');
    }
    document.write('\');</style>');
    //-->
    </SCRIPT>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

誰能給我一些我做錯事情的見解？

非常感謝。 我已經從這個地方學到了很多。

- - 安德魯

Answer 1

無需JavaScript，只需使用CSS媒體查詢 ：

@media all and (min-width: 1024px) {
    background-image: url(images/mmmgirl.png);
}

Answer 2

試試這個jsfiddle ：

var screenWidth = screen.width,
    container = document.getElementById('container_header_body');

console.log(screenWidth);

if (screenWidth > 1024) {
     container.style.backgroundImage = 'url(http://oddanimals.com/images/lime-cat.jpg)';
} else {
    container.style.backgroundImage = 'none';
}