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

Question

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

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

我想要的 fiddle 桌面视图是：

我在 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 中进行哪些更改，以便在桌面视图中没有水平滚动。移动视图在 fiddle 中看起来很完美。

Answer 1

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

编辑：

你想要这个...

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

针对任何超过平板电脑大小的内容（但不是肖像 ipad），希望这对您有所帮助。

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

Avoiding horizontal scroll in desktop view in html/css

html

css

horizontal-scrolling

media-queries