フロントエンドブラウザのフォントサイズが12px未満のソリューション

序文

最近プロジェクトに取り組んでいたとき、UI デザインのフォント サイズは 10 ピクセルでした。レンダリングを見ると、フォント サイズがまだかなり大きいことがわかりました。12 ピクセルに変更しても、フォント サイズは同じままでした。14 ピクセルに変更すると、フォント サイズが大きくなりました。パターンを見つけて、ユーザーにフォントをはっきりと見せるために、ブラウザが最小設定を 12 ピクセルに設定していることに気付きました。何をするか？デザインは10pxですか？

最終的な効果図は次のようになります。

レンダリング

レンダリング

レンダリング

Baidu で検索したところ、専門家はtransform: scale(0.5)を使用すると要件を満たすことができると言っていました。しかし、実際に使用してみると、div 全体の幅と高さが拡大縮小され、要件を満たしていないことがわかりました。

逆に、赤い点とテキストを 2 つの div に配置することもできます。赤い点は幅と高さを制御し、必要に応じて transform: scale を使用してフォントを縮小できます。

具体的な実装コードは次のとおりです。

<div v-if="cartNum>=1" クラス="cartData">
     <div class="Num" v-if="cartNum>=1&&cartNum<=99">{{cartNum}}</div>
     <div class="Num" v-else-if="cartNum>99">99+</div>
</div>

CSS部分:

.cartData{
    高さ: .75rem;
    最小幅: .75rem;
    境界線の半径: .375rem;
    背景: 赤;
    色: 白;
    テキスト配置: 中央;
    行の高さ: .75rem;
  }
  .数値{
    フォントサイズ: 20px;
    -webkit-transform: スケール(0.5);
    }

上記のフォント サイズは 14*0.8 = 11.2 px ですが、必要に応じて調整できます。

このように記述するだけでは IE および FF と互換性がないため、互換性のある別の記述方法を次に示します。

.数値{
    フォントサイズ: 14px;
    -webkit-transform: スケール(0.8);
 }
.フォントサイズ{
  フォントサイズ: 14*0.8px;
}

知らせ：

transform:scale()属性は、幅と高さを定義できる要素のみを拡大縮小できますが、インライン要素には幅と高さがありません。display display:inline-block;を追加できます。

要約する

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。