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

I am working website in which I do wan't any horizontal scroll in the desktop view whereas the mobile view looks perfect (it should be scrolling).

我正在工作的网站,我不会在桌面视图中任何水平滚动,而移动视图看起来很完美(它应该滚动)。

I have created the fiddle for it so that its easy to make changes.

我已经创造了它的小提琴,以便它易于改变。

The desktop view which I want in the fiddle is:

我想要的小提琴桌面视图是:

The CSS codes which I have used in the fiddle in order to get the horizontal scroll is:

为了获得水平滚动,我在小提琴中使用的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;
}

Problem Statement:

I am wondering what changes I should make in the fiddle above so that in the desktop view there is no horizontal scroll. The mobile view looks perfect in the fiddle.

我想知道我应该在上面的小提琴中做出什么改变,以便在桌面视图中没有水平滚动。移动视图在小提琴中看起来很完美。

1 个解决方案

#1

Use media queries to change your CSS to include overflow-x:hidden, instead of overflow-x:auto

使用媒体查询来更改CSS以包含overflow-x:hidden,而不是overflow-x:auto

EDIT:

You want this...

你要这个...

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

That targets anything over tablet size (but not a portrait ipad), hope this helps.

这针对任何超过平板电脑尺寸(但不是肖像ipad),希望这会有所帮助。

#1