序文 最近プロジェクトに取り組んでいたとき、UI デザインのフォント サイズは 10 ピクセルでした。レンダリングを見ると、フォント サイズがまだかなり大きいことがわかりました。12 ピクセルに変更しても、フォント サイズは同じままでした。14 ピクセルに変更すると、フォント サイズが大きくなりました。パターンを見つけて、ユーザーにフォントをはっきりと見せるために、ブラウザが最小設定を 12 ピクセルに設定していることに気付きました。何をするか?デザインは10pxですか? 最終的な効果図は次のようになります。 レンダリング レンダリング レンダリング Baidu で検索したところ、専門家は 逆に、赤い点とテキストを 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; } 知らせ: 要約する 上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。 |
<<: WeChatアプレットでvantフレームワークを使用するための具体的な手順
>>: Layuiテーブルは指定された行のラジオボタンを選択し、その行の実装コードまでスクロールします。
質問:オリジン サーバーはターゲット リソースの表現を見つけることができないか、既存の表現を公開した...
MySQL と接続関連のタイムアウト序文:今日、同僚から、データ量が多いときに MySQL データベ...
Linux で MySQL-5.7.19 バージョンをインストールするための最初のチュートリアル。す...
CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...
1. Dockerネットワークを作成する docker ネットワーク作成 kong-net 2. デ...
目次Linux ドライバーの共通機能 (copy_from_user open read write...
目次継承ES5 プロトタイプ継承ES6 クラス継承両者の違いES5プロトタイプ継承の内部実装ES6 ...
序文テストを行う際、大量のデータによる負荷に耐えるプロジェクトの能力をテストするために、通常はテスト...
この記事は、CentOS 7の詳細なインストールチュートリアルを参考のために記録します。具体的な内容...
1. provideとinjectの説明Provide と Inject により、ネストされたコンポ...
序文実際、Linux では、控えめな「!」が驚くほど多くの用途で使用されています。この記事では、「!...
<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...
プロセスは CPU とメモリ内で実行されるプログラム コードであり、各プロセスは 1 つ以上のプロセ...
目次序文: Ubuntu 18.04 は apt ソースを Alibaba Cloud ソースに変更...
GitHubアドレス、気に入ったらスターを付けてくださいプラグインのプレビューチュートリアルコード表...