はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのページに適用されるデフォルトのスタイルが付属しています。 (以下の場合ははしごが必要です) 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キャンバスランダムパーティクルエフェクトの具体的なコードを共有して...
序文Reduce は ES5 で追加された新しい従来の配列メソッドの 1 つです。forEach、f...
1. サーバーの購入1. 私はAlibaba Cloudのサーバーを選択しました。学生向けで月額9...
序文Workbench が 1 台のコンピューターにインストールされており、別の Ubuntu サー...
1. ウェブページの基本構造: XML/HTML コードコンテンツをクリップボードにコピー<...
この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。...
序文今日、Xianyuを閲覧していたとき、各行の高さが同じではないことに気付きました。調べてみると、...
1. コモンズCommonjsはNode.jsのカスタムモジュールですCommonjs 仕様は、Ja...
目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...
MySQL でデータを削除する方法は 2 つあります。1 つは DELETE ステートメント、もう ...
この記事では、JavaScript Canvasの動的なワイヤーフレーム効果を描画する具体的なコード...
この記事は、透明度を変えてカルーセルにするXiaomiカルーセルを真似て書いたものです。初心者なので...
たとえば、現在のパスが /var/log で、/usr ディレクトリに移動する場合は、次のコマンドを...
今日は、MySQL IN サブクエリの最適化に関するケーススタディを見ました。最初は少し懐疑的でした...
<br /> 英語原文: http://desktoppub.about.com/od/...