html - 为什么这个 CSS 在智能手机上显示时会产生如此巨大的布局？

Question

我有这个 CSS:https://cal-linux.com/styles/tutorial.css

还有一个使用它的示例页面:https://cal-linux.com/tutorials/gswc++.html

当我在智能手机上显示它时(或者当我通过 Google 的移动友好性验证服务检查它时)，布局看起来很大(裁剪得很糟糕，而不是缩小以适合智能手机的屏幕。

我只使用比例测量(例如，outsidecontainer 的 div 宽度为 80%，内部最右边的列的最小宽度为 25%)。我将 Google Ads 放在那里，但它是一个“响应式”广告，应该适应页面的可用大小和布局。

有什么建议吗？我认为发布页面的实际链接可能是理想的；但请让我知道是否需要重现问题的“最小”代码实例。

谢谢，

Cal-linux

Answer 1

这里有几点我要注意:

1. 您使用display:table-row 和display:table-cell 有点太多了。这些对调整大小的 react 不佳，特别是如果您没有指定每个元素的宽度。相反，要么在容器的 :after 伪元素或内联 block 上使用带有 clear:both 的 float 。无论哪种方式，您都应该为容器定义百分比宽度。
2. 您的 css 有很多 white-space:nowrap 但没有使用 overflow:auto 强制元素不调整内容大小而只是拉伸(stretch)其父容器。
3. 除此之外，我还看到了一些固定的 px 宽度，这使得调整大小变得更加困难。这似乎不是你的广告。虽然谷歌的脚本确实会抛出一个关于试图将广告放入 86px x 未定义空间的错误。您可以设置一个固定的 height 或至少一个 min-height 来让脚本知道应该在那里放置多大的广告。

最简单的解决方案是结合 Bootstrap 来完成根据需要设置网格的繁重工作。

你基本上可以像这样做你的两列样式:

<div class="container-fluid">
  <div class="left-col col-md-11">
     <!--- ALL YOUR CONTENT HERE //-->
  </div>
  <div class="right-col col-md-1">
     <!---Google Ads go Here //-->
  </div>
</div>

如果你想坚持自己的风格，通过使用 chrome 中的代码检查器，我可以在调整大小时得到以下结果:

• 我将 tablerow 类设为标准 display:block
• 第一列设置为 width:75%;显示:内联 block ；
• 第二列设置为 width:25%;显示:内联 block ；
• 自动调整大小的元素更改为 display:block;max-width:100%;溢出:自动；宽度:自动；填充:0
• div.code block 已更改为 display:block;white-space:nowrap;width:auto;

其他一切几乎保持不变。这应该可以解决这个问题，但是您应该注意，像 bootstrap 这样的框架通过使页面列折叠并在移动浏览器中一个一个地放在另一个之上来帮助移动网站，以便它们获得最大的空间。