一个客户要求一个响应式网页设计的宽度最小为 1px（他们最初要求 0px，但我能够说服他们这实际上并不存在）。
显然，我无法渲染字符或图像，所以我的想法是使用页面高度下方的像素以摩尔斯或二进制代码对所有内容进行编码。这可以只使用 CSS 来完成吗？
问问题
112 次
1 回答
3
这是我见过的最愚蠢的问题！
我将为您和您的客户保留我的侮辱，纯粹是因为这很有趣。它对人类没有用处或不可用，但可以使网页宽 1 像素。
...除了图像，显然您不会在 1px 上很好地看到图像，因此您可以将它们缩放到单个像素或完全隐藏它们。我让你决定。
...也没有桌面浏览器可以有这么小的视口。但是可以有一个 1px 宽的 iframe。
...您和您的客户也将无法阅读此内容，它将是莫尔斯或二进制（或其他）。完全不是人类可读的。
使用媒体查询仅在 1px 处显示二进制文件
使用当今大多数响应式开发人员正在使用的 CCS 媒体查询，添加如下内容：
@media screen and (max-width: 1px) { }
您需要在这些卷曲中添加您的 CSS。
然后旋转定位
我已经做了一个你想要做的例子，它是旋转和定位文本，使其位于屏幕左侧的一半。
检查JSfiddle（我把它放在一个div中，隐藏溢出来模拟一个1px宽的寡妇）。如果文本内容是动态的，您可能需要使用 javascript。
使用条形码风格的字体
如果您查看上面的 JSfiddle，可能并不明显，即使是训练有素的机器也无法读取它。字符的宽度不同，有些字符看起来相同，例如 l、i 和 t 具有相同的宽度和中心像素线。
所以你可能想要使用这样的条形码字体。
最终结果将如下所示：
于 2013-09-11T06:29:43.567 回答