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

フロントエンドブラウザのフォントサイズが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 を応援していただきありがとうございます。

<<:  WeChatアプレットでvantフレームワークを使用するための具体的な手順

>>:  Layuiテーブルは指定された行のラジオボタンを選択し、その行の実装コードまでスクロールします。

推薦する

Docker Tomcat のアクセス インターフェイスが表示されないのはなぜですか?

質問:オリジン サーバーはターゲット リソースの表現を見つけることができないか、既存の表現を公開した...

MySQL と接続関連のタイムアウトの詳細な概要

MySQL と接続関連のタイムアウト序文:今日、同僚から、データ量が多いときに MySQL データベ...

Linux での MySQL 5.7.19 (tar.gz) インストール グラフィック チュートリアル

Linux で MySQL-5.7.19 バージョンをインストールするための最初のチュートリアル。す...

CSS フロートプロパティ図 フロートプロパティの詳細

CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...

Docker に Kong ゲートウェイをインストールする方法の例

1. Dockerネットワークを作成する docker ネットワーク作成 kong-net 2. デ...

Linux ドライバ開発でよく使われる関数 copy_from_user open read write の詳細な説明

目次Linux ドライバーの共通機能 (copy_from_user open read write...

JS における ES6 継承と ES5 継承の違い

目次継承ES5 プロトタイプ継承ES6 クラス継承両者の違いES5プロトタイプ継承の内部実装ES6 ...

MySQL のストアド プロシージャを使用して 100 万件のレコードをすばやく生成する方法

序文テストを行う際、大量のデータによる負荷に耐えるプロジェクトの能力をテストするために、通常はテスト...

CentOS 7のインストールと設定方法のグラフィックチュートリアル

この記事は、CentOS 7の詳細なインストールチュートリアルを参考のために記録します。具体的な内容...

Vue3 での provide と injection の使用

1. provideとinjectの説明Provide と Inject により、ネストされたコンポ...

Linux における「!」の知られざる使用法のまとめ

序文実際、Linux では、控えめな「!」が驚くほど多くの用途で使用されています。この記事では、「!...

Web デザインにおける HTML フォーマットと長いファイルに関するヒント

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...

LINUX でプロセスを表示する 4 つの方法 (要約)

プロセスは CPU とメモリ内で実行されるプログラム コードであり、各プロセスは 1 つ以上のプロセ...

Ubuntu 18.04 で apt ソースを Alibaba Cloud ソースに変更する詳細なプロセス

目次序文: Ubuntu 18.04 は apt ソースを Alibaba Cloud ソースに変更...

純粋な CSS 流星群の背景サンプルコード

GitHubアドレス、気に入ったらスターを付けてくださいプラグインのプレビューチュートリアルコード表...