一位客户要求宽度小于1像素的自适应网页设计（他们最初要求的宽度为0像素，但我能够说服他们这实际上不存在）。
显然，我无法渲染字符或图像，因此我的想法是使用页面高度以下的像素以摩尔斯电码或二进制代码对所有内容进行编码。可以仅使用CSS完成此操作吗？
最佳答案
这是我见过的最愚蠢的问题！
我将为您和您的客户节省我的侮辱，纯粹是因为这很有趣。它对人类没有用或无法使用，但可以使网页宽1像素。
...除了图像，显然您将无法很好地看到1px的图像，因此您可以将它们缩放到单个像素或完全隐藏它们。我让你决定。
...也没有桌面浏览器可以拥有如此小的视口。但也可以使用1px宽的iframe。
...而且您和您的客户将无法阅读此内容，它将以摩尔斯或二进制（或其他形式）显示。完全不可读。
使用媒体查询仅以1px显示二进制
使用当今大多数响应性开发人员正在使用的CCS媒体查询，添加以下内容：
@media screen and (max-width: 1px) { }
您将需要在这些curl中添加CSS。
然后旋转并定位
我已经举例说明了您要执行的操作，即旋转并放置文本，使其距离屏幕左侧一半。
检查JSfiddle（我将它放在一个div中，其中的溢出被隐藏以模拟1px宽的寡妇）。如果文本内容是动态的，则可能需要使用javascript。
使用类似条形码的字体
如果您看一下上面的JSfiddle，即使训练有素的机器也不会读懂它，这可能并不明显。字符的宽度不同，某些字符看起来相同，例如，l，i和t具有相同的宽度和中心像素线。
因此，您可能希望使用this之类的条形码字体。
最终结果将如下所示：
关于css - 呈现1px宽度的网页的最佳方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18732916/