如何避免网站上的水平滚动答案

【问题标题】：How to avoid horizontal scroll on website如何避免网站上的水平滚动
【发布时间】：2020-07-25 13:35:54
【问题描述】：

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

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;
}

【问题讨论】：

标签： html css responsive-design media-queries mobile-website

【解决方案1】：

我建议您执行以下操作：

从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; }
}

【讨论】：

【解决方案2】：

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

【讨论】：

我添加了媒体查询来修复它！

【解决方案3】：

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

附：我也从 CodeCamp 开始，祝下一个作业好运

【讨论】：

【解决方案4】：

删除 @media 和 h1 并将它们替换为：

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, fontsize 32px on a 320px display
point2 x2=1280px y2=80px, fontsize 80px on a 1280px display

以及所有 h1.font-size 之间/之外的所有显示尺寸（我用你的 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 的东西都可以被视为“智能手表”！

【讨论】：

哇，绝对是达到预期效果的好方法。我不知道可以做到这一点。我会在以后的项目中尝试实现它！

【解决方案5】：

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

【讨论】：