使用屏幕大小的查询和运行脚本

Question

对javascript非常新...我如何设置我的网站是使用CSS查询来检测屏幕尺寸。如果宽度大于750像素，则会显示桌面div。如果更少，您将获得移动div。这些div中的内容完全相同，但样式有所不同。

我创建了一个页面，其中div引用了一段JavaScript。我发现，即使桌面和移动div都需要相同的脚本，我却无法在其上运行相同的javascript。为什么台式机和移动div不能使用完全相同的javascript？

<div class="background-chart-desktop">
    <h2>Bra size chart</h2>
    <p style="color:#fff; ">Show measurements in: <a onclick="divVisibility('Inches');" style="color:#fff;">Inches</a> |  <a onclick="divVisibility('Centimeters');" style="color:#fff;">Centimeters</a></p>
</div>
 <div class="background-chart-mobile" >
    <h2>Bra size chart</h2>
    <p style="color:#fff; ">Show measurements in: <a onclick="divVisibility('Inches');" style="color:#fff;">Inches</a> |  <a onclick="divVisibility('Centimeters');" style="color:#fff;">Centimeters</a></p>        
</div>

<script> 
    var divs = ["Inches", "Centimeters"];
    var visibleDivId = null;

    function divVisibility(divId) {
        if (visibleDivId !== divId) {
            visibleDivId = divId;
            hideNonVisibleDivs();
        }
    }

    function hideNonVisibleDivs() {
        var i, divId, div;
        for (i = 0; i < divs.length; i++) {
            divId = divs[i];
            div = document.getElementById(divId);
            if (visibleDivId === divId) {
                div.style.display = "block";
            } else {
                div.style.display = "none";
            }
        }
    }        
</script>