移动设备页面右侧的空白

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

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