クライアントは、幅 1 ピクセルまでのレスポンシブ Web デザインを要求しました (最初は 0 ピクセルを要求しましたが、実際には存在しないことを納得させることができました)。
明らかに、私は文字や画像をレンダリングすることができないので、ページの高さのピクセルを使用してモールスまたはバイナリ コードですべてをエンコードすることを考えています。これは CSS だけで実現できますか?
質問する
112 次
1 に答える
3
これは私が今まで見た中で最も愚かな質問です!
私はあなたとあなたのクライアントのために侮辱を保存するつもりです.これは純粋に興味深いからです. 人間にとっては役に立たないか使用可能ではありませんが、Web ページの幅を 1px にすることは可能です。
...画像を除いて、明らかに1pxでは画像がうまく表示されないため、画像を単一のピクセルにスケーリングするか、完全に非表示にすることができます。あなたに決めさせます。
...また、これほど小さいビューポートを持つデスクトップ ブラウザはありません。ただし、1px 幅の iframe を使用することは可能です。
...また、あなたとあなたのクライアントはこれを読むことができません。モールスまたはバイナリ (またはその他のもの) になります。人間が読める形式ではありません。
メディア クエリを使用して 1px のバイナリのみを表示する
ほとんどのレスポンシブ開発者が現在使用している CCS メディア クエリを使用して、次のようなものを追加します。
@media screen and (max-width: 1px) { }
これらのカーリーに CSS を追加する必要があります。
次に、回転させて配置します
やりたいことの例を作成しました。これは、テキストを回転させて配置し、画面の左側から半分になるようにすることです。
JSfiddleを確認します(1px 幅の未亡人をシミュレートするために、オーバーフローを非表示にして div に配置しました)。テキスト コンテンツが動的な場合は、おそらく JavaScript を使用する必要があります。
バーコード風のフォントを使用する
上記の JSfiddle を見ても、よく訓練されたマシンでさえそれを読み取れないことはおそらく明らかではありません。文字は幅が異なり、一部の文字は同じように見えます。たとえば、l、i、および t は同じ幅で中央のピクセル ラインを持ちます。
したがって、このようなバーコード フォントを使用することをお勧めします。
最終結果は次のようになります。
于 2013-09-11T06:29:43.567 に答える