css - 以 1px 宽度呈现网页的最佳方式

Question

一位客户要求将响应式网页设计缩小到 1 像素宽度(他们最初要求 0 像素，但我能够说服他们这实际上不存在)。

显然，我无法呈现字符或图像，所以我的想法是使用页面高度下方的像素以莫尔斯码或二进制代码对所有内容进行编码。这可以仅使用 CSS 来完成吗？

Answer 1

这是我见过的最愚蠢的问题!

我将保留对您和您的客户的侮辱，纯粹是因为这很有趣。它对人类没有用处或无法使用，但有可能使网页宽度为 1 像素。

... 除了对于图像，显然你不会在 1px 时很好地看到图像，所以你可以将它们缩放到单个像素或完全隐藏它们。我会让你决定。

... 还有没有桌面浏览器可以有那么小的视口(viewport)。但是有一个 1px 宽的 iframe 是可能的。

... 还有您和您的客户将无法阅读此内容，它将以莫尔斯码或二进制(或其他格式)显示。 完全不是人类可读的。

---

使用媒体查询仅以 1 像素显示二进制

使用当今响应速度最快的开发人员使用的 CCS 媒体查询，添加如下内容:

@media screen and (max-width: 1px) { }

您需要在这些 curl 中添加您的 CSS。

然后旋转定位

我已经举例说明了您想要执行的操作，即旋转和定位文本，使其位于屏幕左侧的一半位置。

检查 JSfiddle (我把它放在一个 overflow hidden 的 div 中以模拟 1px 宽的寡妇)。如果文本内容是动态的，您可能需要使用 javascript。

使用类似条形码的字体

如果您查看上面的 JSfiddle，可能并不明显，即使训练有素的机器也无法读取它。字符的宽度不同，有些字符看起来相同，例如 l、i 和 t 具有相同的宽度和中心像素线。

因此您可能希望使用像 this 这样的条形码字体.

最终的结果是这样的: