Question

我试着写一个像桌子一样的设计，它应该是响应式的。我用vh和vw来表示高度和宽度。设计应该有5行和3列。当我用前两行测试设计时，它在手机和笔记本上看起来很不错。当我添加第三行时，我在笔记本上得到了破坏的设计。在手机上它看起来很棒。

HTML：

<!DOCTYPE html>
<html lang = "de">
    <head>
        <title>Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset = "utf-8">
        <link rel = "stylesheet" href = "./css/style.css">
    </head>
    <body>
        <div id = 'reihe1'>
            <div id = 'spalte1reihe1'>
            </div>
            <div id = 'spalte2reihe1'>
            </div>
            <div id = 'spalte3reihe1'>
            </div>
        </div>
        <div id = 'reihe2'>
            <div id = 'spalte1reihe2'>
            </div>
            <div id = 'spalte2reihe2'>
            </div>
            <div id = 'spalte3reihe2'>
            </div>          
        </div>
        <div id = 'reihe3'>
            <div id = 'spalte1reihe3'>
            </div>
            <div id = 'spalte2reihe3'>
            </div>
            <div id = 'spalte3reihe3'>
            </div>          
        </div>
        <div id = 'reihe4'>
            <div id = 'spalte1reihe4'>
            </div>
            <div id = 'spalte2reihe4'>
            </div>
            <div id = 'spalte3reihe4'>
            </div>          
        </div>
    </body>
</html>

CSS：

* { box-sizing: border-box;}

body {
    background-color: #3C3C3B; /* Dunkel Grau */
    padding: 0px;
    margin: 0px;
}

/* Willkommenseite */

#spalte1reihe1 {
    width: 25vw;
    height: 25vh;
    float: left;
    background-color: #ECECEC; /* Grau */
}

#spalte2reihe1 {
    width: 48vw;
    height: 25vh;   
    float: left;
    background-color: #ffffff;
}

#spalte3reihe1 {
    width: 25vw;
    float: left;
    height: 25vh;
    background-color: #ECECEC; /* Grau */
}

#spalte1reihe2 {
    width: 25vw;
    height: 19vh;
    float: left;
    background-color: #2DAB66; /* Grün */
}

#spalte2reihe2 {
    width: 48vw;
    height: 19vh;   
    float: left;
    background-color: #ECECEC; /* Grau */
}

#spalte3reihe2 {
    width: 25vw;
    float: left;
    height: 19vh;
    background-color: #2DAB66; /* Grün */
}

#spalte1reihe3 {
    width: 25vw;
    height: 19vh;
    float: left;
    background-color: #ECECEC; /* Grün */
}

#spalte2reihe3 {
    width: 48vw;
    height: 19vh;
    float: left;
    background-color: #ffffff; /* Grün */
}

#spalte3reihe3 {
    width: 25vw;
    height: 19vh;
    float: left;
    background-color: #ECECEC; /* Grün */
}

#spalte1reihe4 {
    width: 25vw;
    height: 25vh;
    float: left;
    background-color: #ECECEC; /* Grau */
}

#spalte2reihe4 {
    width: 48vw;
    height: 25vh;   
    float: left;
    background-color: #ffffff;
}

#spalte3reihe4 {
    width: 25vw;
    float: left;
    height: 25vh;
    background-color: #ECECEC; /* Grau */
}

我验证代码我没有得到任何错误。所以我不知道错误在哪里。 http://www.benwillgruber.com/stefanseite/test/index.php您可以查看网站以查看问题。

帮助

Answer 1

试试这个：

body {
  width: 100vw;
  overflow-x: hidden;
}

目前所有浏览器，但Firefox错误地认为100vw是整个页面宽度，包括垂直滚动条，当溢出时会导致水平滚动条：自动设置。

模拟器/手机和笔记本之间的不同设计

1 个答案: