はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのページに適用されるデフォルトのスタイルが付属しています。 (以下の場合ははしごが必要です) Chromium UA スタイルシート - Google Chrome と Opera Mozilla UA スタイルシート - firefox WebKit UA スタイルシート - Safari ほとんどは同じですが、検索入力ボックスなど一貫性のないスタイルも多数あります。 そのため、CSS 処理をリセットし、異なるブラウザ間の違いを統一し、チームが開発した初期標準を確認し、ブラウザの「欠点」を補う必要があります。 html{ /* 標準フォント サイズは問題ありませんが、モバイル デバイスで rem を使用すると動的に変更されます。 */ フォントサイズ:14px; /* IE ボックス モデルを使用します (個人的な選択ですが、通常はパディングと境界線を含めたボックスの実際のサイズに幅を設定します) */ ボックスのサイズ: 境界線ボックス; } html,本文{ /* 一部のモバイルブラウザでは、リンクまたはクリック可能な要素をクリックすると、半透明の灰色の背景が表示されます。 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* モバイルデバイスでのスクロールエクスペリエンスを向上*/ -webkit-オーバーフロースクロール: タッチ; オーバーフロースクロール: タッチ; /* ブラウザウィンドウと同じ高さ*/ 高さ: 100%; } 体{ /* 一部の背景はデフォルトで薄い灰色なので、すべて純白に設定されています*/ 背景: #fff; /* antd によると、社内では Microsoft YaHei を使用しないでください。rem フォントの使用は推奨されません。 */ フォント:14px、-apple-system、BlinkMacSystemFont、'Segoe UI'、'PingFang SC'、'Hiragino Sans GB'、'Microsoft YaHei'、 「Helvetica Neue」、Helvetica、Arial、サンセリフ、「Apple Color Emoji」、「Segoe UI Emoji」、「Segoe UI Symbol」 /* フォントを滑らかにする */ -webkit-font-smoothing: アンチエイリアス; -moz-osx-font-smoothing: グレースケール; } ブラウザのデフォルトのマージンとパディングを削除し、不要なタグを自分で削除します 体、 p、 h1, h2, h3, h4, h5, h6, dl、 dd、 ウル、 オール、 番目、 td、 ボタン、 形、 入力、 テキストエリア、 形状、 前、 引用ブロック、 形{ マージン: 0; パディング: 0; } { /* 小さな手 */ カーソル: ポインタ; /* ハイパーリンクのデフォルトの下線を解除します */ テキスト装飾:なし; /* これは antd でも行われますが、チームがこのスタイルを必要とするかどうかによって異なります */ 遷移: カラー 0.3 秒の緩和; } オール、 ul{ /* 醜いスタイルを削除します。 */ リストスタイル:なし } これらのノードの一部のプロパティは親ノードのスタイルを継承しないため、すべてがそれを継承し、アウトライン効果をキャンセルします。 、 h1, h2, h3, h4, h5, h6, 入力、 選択、 ボタン、 テキストエリア { フォントファミリー: 継承; フォントサイズ: 継承; フォントの太さ: 継承; フォントスタイル: 継承; 行の高さ: 継承; 色: 継承; アウトライン: なし; } ボタン、 入力[type='送信'], 入力[type='ボタン'] { /*クリック可能な手*/ カーソル: ポインタ; } /* 一部のブラウザの数値入力コントロールの表示をキャンセルすると、コントロールの外観が変わる場合があります。 */ 入力[タイプ='数値'] { -moz-appearance:テキストフィールド; } 入力[タイプ=数値]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { マージン: 0; -webkit-appearance: なし; } /** * Firefox で内側の境界線とパディングを削除します。 */ ボタン::-moz-focus-inner、 [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { 境界線スタイル: なし; パディング: 0; } /** * HTML5 の非表示を IE10 で正しく表示するようにする*/ [隠れた] 表示: なし; } テンプレート { /* 一部のブラウザではテンプレートが表示されますが、テンプレートタグはほとんど使用されないので、自分で選択できます。 */ 表示: なし; } CSS リセットアドレス 今後もさらに追加していきますので、ぜひご参加ください。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
>>: Apache ポートに基づいて仮想ホストを作成する例
目次JS はファイルを読み取る FileReader書類イベントとメソッド基本的な使い方イベント処理...
より良いスクロールの原則親コンテナーであるため、ラッパーの高さはコンテンツのサイズに応じて増加します...
序文hover疑似クラスが要素に境界線を追加すると、要素内のコンテンツがずれることがあります。box...
目次導入複数の異なるハッシュを区別するハッシュチャンクハッシュコンテンツハッシュjs キャッシュの実...
1. まず、TomcatログのエンコーディングとIdeaログ表示コンソールのエンコーディングを区別す...
この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...
WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...
クイックスタート1. Docker Hubでnginxイメージを見つけるdocker 検索 ngin...
目次前面に書かれた解決策 1: グローバル スタイル オーバーライドを使用する (フロントエンドに共...
目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...
1. CentOS 7 と CentOS 8 のネットワーク構成の違い: VMware Workst...
負荷分散とは何ですか?ドメイン名が複数の Web サーバーを指している場合は、nginx ロード バ...
1. Dockerをインストールするまず Linux 環境を開き、次のコマンドを入力してインストール...
通常、Java の学習とプロジェクトのデプロイはローカルで行われますが、実稼働環境は Linux 環...
目次Redux Toolkitが解決する問題何が含まれていますか? Redux Toolkit AP...