Question

在手机上查看此网站，您将了解我正在尝试做什么。 This is my website

注意wix上的索引如何在移动设备上变为<body> <div id="box"></div> <script type="text/javascript"> var colors = ['red', 'yellow', 'blue', 'green', 'brown', 'violet']; var windowHeight = 0; var parendElement; window.onload = function () { parendElement = document.getElementById("box"); windowHeight = window.innerHeight; document.body.style.height = windowHeight + "px"; console.log(document.body.style.height); generateBall(); //Creates ball for every 1 second interval var interval = setInterval(function () { generateBall(); }, 1000); }; function generateBall() { var leftPos = Math.floor((Math.random() * window.innerWidth) - 30); var para = document.createElement("p"); para.setAttribute("class", 'circle'); para.style.background = colors[Math.floor(Math.random() * colors.length)]; para.style.left = leftPos + "px"; parendElement.appendChild(para); var btmPos = 0; var animationInterval = setInterval(function () { if (btmPos < windowHeight) { btmPos += 5; } else { console.log("yes"); clearInterval(animationInterval); parendElement.removeChild(para); } para.style.bottom = btmPos + "px"; para.style.left = leftPos + "px"; }, 100); } </script> </body>。我的意思是display: block。

我尝试做同样的事情，它在调整浏览器大小时在桌面上运行得非常好，但在移动设备上却没有。

我有your success and the two other boxes和index_whitebox以及index_whitebox_2

它是这样的：

CSS

index_whitebox_3

相同的CSS，其他两个框的边距略有不同。至于媒体查询：

CSS

.index_whitebox{
    min-height: 380px;
    width: 25%;
    position: relative;
    float: left;
    margin-left: 6%;
    border: 2px solid rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    display: inline-block;
}

HTML

@media screen and (max-width: 500px) {

    .index_whitebox{
        min-height: 0;
        width: 90%;
        position: relative;
        float: none;
        margin-left: auto
        margin: auto;
        border: 2px solid rgba(255, 255, 255, 1);
        background-color: rgba(255, 255, 255, 1);
        border-radius: 5px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
        display: block;
    }  

}

和其他框一样的html。

Answer 1

将它放在你的css文件中

@media screen and (max-width: 768px) {
    .header{min-width:100%;}
    #banner{min-width:100% !important;}
    .whitebox_wrapper{min-width:100%;}
    .index_wrapper{width:100%;}
}

它可能对你有帮助

在移动屏幕上显示块

1 个答案: