最近、面接を受けていて、いくつか興味深いことに出会いました。たとえば、今日は面接の前に面接問題を解いてみましたが、その中に興味深い問題がありましたので、メモしておくことにしました。
<!-- Chromeブラウザでは、12px以下のフォントサイズが表示されず、すべて12pxと表示されます。どのように解決すればよいでしょうか。 -->
少し戸惑いました。以前にコードを書いているときにはこのような状況には遭遇したことがありませんでしたが、このような質問があるので、解決策を考え出さなければなりません。
まず、以前の問題を思い出しました。0.5px のボーダーをどのように実現するか、scale(0.5)を使用することで実現できます。これは CSS3 の新しいプロパティです。
そのため、私はtransform:scale()を使用して実現しました。しかし、面接中にはこれらの問題について触れられませんでした。
家に帰って、食事を済ませてコンピュータの前に座って、GitHub を見ていると、突然このような問題を思い出しましたので、自分でテストしてみました：
<div style="font-size: 13px;">
テスト
</div>
<div style="font-size: 12px;">
テスト
</div>
<div style="font-size: 11px;">
テスト
</div>
実際にこのような問題が存在することがわかりました。Chrome では 12px 以下のフォントが正常に表示されず、すべて 12px と表示されます。
それから、属性を設定するために scale を使用しました。
<div style="font-size: 13px;">
テスト
</div>
<div style="font-size: 12px;">
テスト
</div>
<div style="font-size: 11px;transform: scale(0.5);">
テスト
</div>
フォントは実際に自分が思い描いたサイズまで再度縮小されましたが、いくつかの欠点が存在します。長さを持つすべての属性が縮小されます。たとえば、図の div の長さはデフォルトで100%ですが、表示されるのは元の半分だけです。
このような問題が存在するとは言え、私の予測では、通常、私たちが閲覧するウェブサイトには基本的に 12px 未満のフォントはありません！少なくとも私は遭遇したことがありませんし、面接問題も私たちにいくつかのマイナーな知識の処理能力を試すためのものだと思いますが、それほどマイナーではありません。0.5px の前に、12px の後に、実際には大差ないです。
この問題に遭遇した場合、scale()を使用して対処し、他の属性を注意深く設定して、できるだけ多くの欠点を避けることができます。