根据页面大小自动缩放十六进制计数（背景），即使它发生变化

Question

这是我做的，我希望这是网站的背景。它目前是可扩展的，因为六边形的数量是在刷新期间计算的。但是，如果您放大页面，或者 缩小页面。六边形的数量已经不够，不会自动重新计算。如何根据页面大小自动缩放十六进制数，即使它发生变化？

一行中的每个六边形（div）都有 class 名称“hexagon” 它们都在“行”div 中，行数与行数一样多。这些行在“容器”中 div

我还想在背景上添加信息（文字、图片等）我需要不止一个屏幕，所以我希望能够向下滚动，但是这个背景固定在它上面（或者通过直端缩小与其余部分相同的大小），它不受滚动的影响.

提前致谢，我真的需要帮助

//js
    function wndsize(){
      var w = 0;var h = 0;
      //IE
      if(!window.innerWidth){
        if(!(document.documentElement.clientWidth == 0)){
          //strict mode
          w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
        } else{
          //quirks mode
          w = document.body.clientWidth;h = document.body.clientHeight;
        }
      } else {
        //w3c
        w = window.innerWidth;h = window.innerHeight;
      }
      return {width:w,height:h};
    }

    var wnc = Math.ceil(wndsize().width/100);
    var hnc = Math.ceil(wndsize().height/84);

    for (let i = 0; i < hnc; i++) {
    let div = document.createElement('div');
    div.className = 'row';
    var divs = [];    
        
    for (let i = 0; i < wnc; i++) {
        divs[i] = document.createElement('div');
        divs[i].className = 'hexagon';
        div.appendChild(divs[i]);
    }

         document.getElementsByClassName('container')[0].appendChild(div);
    }

    /*css*/
    *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                cursor: crosshair; 
            }
            {
                scrollbar-width: none;
            }
            ::-webkit-scrollbar {
                width: 0px;
            }
            body{
                background: #000;
                min-height: 100vh;
            }
            .container{
                position: relative;
                overflow: hidden;
                height: 100vh;
                animation: animate 3s linear infinite;
            }
            @keyframes animate{
                0%{
                    filter: hue-rotate(0deg);
                }
                100%{
                    filter: hue-rotate(360deg);
                }
            }
            .row{
                display: inline-flex;
                margin-left: -50px;
                margin-top: -32px;
                overflow: hidden;
            }
            .row:nth-child(even){
                margin-left: 1px;
            }
            .hexagon{
                position: relative;
                height: 110px;
                width: 100px;
                background: #111;
                margin: 1px;
                clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
                transition: 0.5s;
            }
            .hexagon:before{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                pointer-events: none;
                background: rgba(255, 255, 255, 0.02);
            }
            .hexagon:hover{
                transition: 0s;
                background: #0f0;
            }

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <link href="style.css" rel="stylesheet">
        </head>

        <body>
      <div class="container">   
        </div>

       <script src="responsive background.js"></script>
        </body>
        

    </html>

Answer 1

您应该使用附加到 window 调整大小事件的函数，并在调整大小时重新绘制六边形。我在下面添加了这样一个功能。

假设不需要 IE 8 支持，为简洁起见，我删除了对旧版浏览器的检查。 window.innerWidth 最近支持很好 (https://caniuse.com/mdn-api_window_innerwidth)。

我还添加了一个内容div。我禁用了鼠标交互，因此悬停状态被发送到背景层。这会带来一些后果，例如：链接在内容 div 中不起作用。如果你想同时拥有悬停效果和可点击链接，我想唯一的解决方案是使用 JS 测量鼠标位置并使用此信息点亮六边形。

编码愉快！

//js
const container = document.getElementsByClassName('container')[0];

const resizeHandler = () => {
    let wnc = Math.ceil(window.innerWidth/100);
    let hnc = Math.ceil(window.innerHeight/84);

    // remove all divs from container
    let child = container.lastElementChild; 

    while (child) {
        container.removeChild(child);
        child = container.lastElementChild;
    }


    for (let i = 0; i < hnc; i++) {
        let div = document.createElement('div');
        div.className = 'row';
        let divs = [];    
            
        for (let i = 0; i < wnc; i++) {
            divs[i] = document.createElement('div');
            divs[i].className = 'hexagon';
            div.appendChild(divs[i]);
        }

        document.getElementsByClassName('container')[0].appendChild(div);
    }
}

resizeHandler();    

window.addEventListener('resize', resizeHandler);

/*css*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: crosshair; 
}
{
    scrollbar-width: none;
}
::-webkit-scrollbar {
    width: 0px;
}
body{
    background: #000;
    min-height: 100vh;
}
.container{
    position: fixed;
    overflow: hidden;
    height: 100vh;
    animation: animate 3s linear infinite;
}
.content {
    position: relative;
    font-family: sans-serif;
    font-size: 60px;
    color: white;
    min-height: 300vh;
    pointer-events: none;
}
@keyframes animate{
    0%{
        filter: hue-rotate(0deg);
    }
    100%{
        filter: hue-rotate(360deg);
    }
}
.row{
    display: inline-flex;
    margin-left: -50px;
    margin-top: -32px;
    overflow: hidden;
}
.row:nth-child(even){
    margin-left: 1px;
}
.hexagon{
    position: relative;
    height: 110px;
    width: 100px;
    background: #111;
    margin: 1px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: 0.5s;
}
.hexagon:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.02);
}
.hexagon:hover{
    transition: 0s;
    background: #0f0;
}

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
</head>

<body>
<div class="container">   
</div>

<div class="content">SCROLL ME</div>

</body>


</html>

根据页面大小自动缩放十六进制计数（背景），即使它发生变化

automatically scale the hex count (background) based on page size, even if it changes

html

javascript

css

scroll

scale