如果屏幕分辨率宽度> 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';
}