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

Question

客户要求响应式网页设计宽度低至1px（他们最初要求的是0px，但我能够说服他们确实存在这种情况）。

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

Answer 1

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

我会为你和你的客户拯救我的侮辱，纯粹是因为这很有趣。它对人类没有用处或可用，但可能使网页宽1px。

... 除了图像外，显然你不会在1px处看到图像，所以你可以将它们缩放到一个像素或完全隐藏它们。我会让你决定。

... 还没有桌面浏览器可以拥有那么小的视口。但是可以有1px宽的iframe。

... 还您和您的客户将无法阅读此内容，它将使用莫尔斯或二进制（或其他内容）。 完全不是人类可读的。

---

使用媒体查询仅以1px

显示二进制文件

使用CCS媒体查询，这是大多数响应式开发人员今天使用的，添加如下内容：

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

您需要在这些curlies中添加CSS。

然后旋转并定位

我已经做了一个你要做的事情的例子，它是旋转和定位文本，使它离屏幕左侧一半。

检查JSfiddle（我把它放在隐藏溢出的div中以模拟1px宽的寡妇）。如果文本内容是动态的，您可能需要使用javascript。

使用条形码式字体

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

所以你可能想要使用像this这样的条形码字体。

最终结果将如下所示：