移动设备页面右侧的空白区域

Question

我学习建立网站。现在我正在制作页面进行练习，但我遇到了问题。我还没有让它响应，但我已经看到低于 630 像素宽度的页面不再是 100% 宽度。页面右侧出现空白，我不知道这是为什么以及如何解决。

你能帮帮我吗？

screen of my problem

Answer 1

如果任何框（例如 <img>、<span> 或 <table>）比浏览器窗口的宽度宽，就会发生这种情况。

默认情况下，图像不会缩小，单词不会中断。方框不能小于一行中所有单元格的总和。

利用不同的响应技术来避免过度拉伸视口。

img {
  max-width: 100%;
} 

a, 
p, 
span {
  hyphens: auto;
}

/* wrap tables in <div class="horizontal-scroll-wrapper"> */
.horizontal-scroll-wrapper {
  overflow-x: scroll;
}

浏览器的内置检查器有助于查找不可收缩元素的类型。