如何避免网站水平滚动

Question

我最近使用 html 和 CSS 制作了一个致敬页面。该网站在桌面上看起来不错，但在移动设备上，出现水平滚动条并使网站看起来向左aligned.I认为是因为图像超出父容器但我无法修复它。

Github 页数：https://rahulviveknair.github.io/Coldplay-Tribute-Page/

托管在 github 上的代码：https://github.com/RahulVivekNair/Coldplay-Tribute-Page

用于调整图像但似乎不起作用的代码

#image {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

Answer 1

只有当您的 header“COLDPLAY”变得太 big/wide 时才会出现滚动条，这是由于它的 font-size。因此，您应该对 #title 或 h1 使用媒体查询，其中您定义了较小的 font-size 设置。

Answer 2

也尝试在 DevTools 中调试无法缓存（如果您使用 Chrome）。通常文件不会更新，即使您更改某些内容也看不到任何结果。如果您是新手，也请查看此页面 CSS Tricks

P.S。我也开始使用 CodeCamp 祝你在接下来的作业中好运

Answer 3

我建议您执行以下操作：

从 body 中删除 margin 和 padding，并将其宽度设置为 100%，以便不依赖于浏览器应用的默认宽度：

body{padding:0; margin:0; width:100%;}

设置一个max-width如果磁盘覆盖：

#image-grid img {max-width: 100%;}

用媒体查询更改标题的font-size：

@media screen and (max-width: 600px) {
    h1 { font-size: 30px; }
}

Answer 4

删除 h1 的 @media 并替换为：

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: calc(5vmin + 16px); /* (320,32)(1280,80) */
    font-weight: 600;
    text-align: center;
    margin-bottom: -15px;
}

此 calc() 使用线性方程 y=mx+b (MathIsFun: linear equation) 和点

计算 h1.font-size

point1 x1=320px y1=32px，320px 显示器上的字体大小为 32px
point2 x2=1280px y2=80px，在 1280px 显示器上字体大小为 80px

和所有 h1.font-size 所有显示尺寸 inbetween/beyond（我用你的 Codepen 测试了这个）。

通过添加 column-count 和 column-width

    #image-grid {
      column-count: 3;
      column-width: calc(8.75vw + 252px); /* (320,280)(1920,420) */
      ...
    }

最后将 CSS #image { max-width: 100% } 更改为 img { width: 100% } 并且页面上的所有图像都相应地调整大小
看我的Codepen

注意小于 320x320 的任何东西都可以被视为 'smartwatch'!

Answer 5

这真的很简单，如果您只想避免水平滚动条而不是垂直滚动条，您需要做的就是将 overflow-x 值设置为隐藏。但是，这会切断超出滚动条的内容，因此您还需要修复这些宽度。

如何避免网站水平滚动

How to avoid horizontal scroll on website

html

css

mobile-website

media-queries

responsive-design