内容没有响应并堆放在一边 CSS

Question

为什么我的网站在移动设备上会这样显示，而不仅仅是内容？我错过了一些 CSS 吗？请不要我在 body 中使用 box-sizing:border-box。我使用了一些媒体查询，但网站缩小了，所有内容都在移动设备视图的左侧。您可以在 http://assistantmarcus.ml 查看整个网站的整个前端。

PS: 页面在移动模式下完美放大，只是用户可以轻松缩小使其看起来很糟糕。是因为我放的blob吗？

Answer 1

您很可能在 html head:

中缺少视口标签

<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
…
</head>

Answer 2

元标记中的 user-scalable=no 有助于禁用页面放大和缩小

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Answer 3

每当您在视口外绘制内容时，浏览器将允许用户在两个方向上滚动到它。

通过在 600px 下面的屏幕上将 .blob 的 width 设置为 150% 并在 450px 下面的屏幕上设置 290%，您正在呈现当前视口宽度之外的内容，从而创建水平滚动条。

由于水平轴上视口外绘制的内容无关紧要（您只对视口内渲染的放大元素部分感兴趣），您可能想要禁用 body 元素上的水平滚动：

body {
  overflow-x: hidden;
}

看到了here.

旁注：另一种放大 .blob 的方法是 transform 它，而不是设置它的 width 和 height:

@media (max-width: 600px) {
  .blob {
    transform: scale(1.5);
  }
}
@media (max-width: 450px) {
  .blob {
    transform: scale(2.9);
  }
}

我不只是提它，我是在推荐它。使用 transform vs sizing or positioning 有一个很大的优势，即只发生在合成器层，对布局和绘制层没有任何影响，这带来了很大的性能提升，尤其是在处理动画时。这在整个网络上都有很好的记录，我尽力解释了机制 here。

内容没有响应并堆放在一边 CSS

Content not responsive and stacked on a side CSS

html

css

media-queries

responsive-design