避免在 html/css 中的桌面视图中水平滚动

Question

我正在工作的网站中，我确实不想在桌面视图中进行任何水平滚动，而移动视图看起来很完美（它应该是滚动的）。

我为它创建了fiddle，以便于进行更改。

我想要的桌面视图是：

为了获得水平滚动，我在小提琴中使用的 CSS 代码是：

.squares {
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding: 1rem;
    position: relative;
    width: 70%;
    max-width: 1080px;
    overflow-x:auto;
    margin: auto;
}

问题陈述：

我想知道我应该在上面的小提琴中进行哪些更改，以便在桌面视图中没有水平滚动。移动视图在fiddle 中看起来很完美。

Answer 1

使用媒体查询将您的 CSS 更改为包含 overflow-x:hidden，而不是 overflow-x:auto

编辑：

你想要这个...

@media screen and(min-width:769px) {
    .squares {
        overflow-x:hidden;
    }
 }

这针对任何超过平板电脑大小的东西（但不是纵向 ipad），希望这会有所帮助。