HTML ページはダーク モードの実装をサポートします
|
2019年から、AndroidとiOSの両方のプラットフォームでダークモードが使用され始めました。もちろん、これに問題はありませんが、ユーザーがダーク モードでページを開くと、従来の白色ですぐに目がくらんでしまいます。 以下では、ページをダーク モードに対応させる方法について簡単に説明します。 準備する 実際には、CSS で prefers-color-scheme メディア クエリを使用するだけで済みます。
例示する
html
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ">
<title>ページをダークモードに適応させる</title>
</head>
<body class="back">
<div class="models"><h1>テストテキスト</h1></div>
</本文>
</html>
CS
.back {背景: 白; 色: #555; テキスト配置: 中央}
@media (優先カラースキーム: 暗い) {
.back {背景: #333; 色: 白;}
.models {境界線:実線 1px #00ff00}
}
@media (優先カラースキーム: 明るい) {
.back {背景: 白; 色: #555;}
.models {境界線:実線 1px #2b85e4}
}
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: MySQL はカスタムシーケンスを使用して row_number 関数を実装します (詳細な手順)
>>: css-loader を使用して vue-cli で css モジュールを実装する
推薦する
MySQL MyISAM と InnoDB の違い
違い： 1. InnoDB はトランザクションをサポートしていますが、MyISAM はサポートしてい...
HTML テーブル マークアップ チュートリアル (43): テーブル ヘッダーの VALIGN 属性
垂直方向では、ヘッダーの配置を上、中央、下に設定できます。基本的な構文構文Top は上、Middle...
insert と select を組み合わせて、「データベース内のフィールドの最大値 + 1 を挿入する」メソッドを実装する
この記事はmysqlデータベースです質問 1 表 1 のデータを表 2 にインポートします。表 1 ...
JavaScript DOM オブジェクト操作
目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...
MySQLの自動増分IDについて知っておくべきこと
はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...
ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験（グラフィックチュートリアル）
インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...
Element-ui NavMenuサブメニューを使用して再帰的に生成する場合のエラーの詳細な説明
ナビゲーションバーのサブメニューを再帰的に生成すると、メニューは正常に生成できるが、マウスをホバーす...
HTML iframe 使用状況の概要の収集
Iframe 使用状況の詳細な分析<iframe frameborder=0 width=17...
アイデアを war パッケージにパッケージ化し、tomcat にデプロイしてアクセス パスの問題 (図とテキスト)
Web プロジェクトを war にパッケージ化するアイデアにとって最も重要なことは、アトリフィカを...
表 td 画像水平および垂直中央揃えコード
HTMLコード:コードをコピーコードは次のとおりです。 <td align="cen...
スプライトとフォントアイコンを実装するためのCSS
スプライト:以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな W...
JavaScript ECharts の使用方法の説明
以前、プロジェクトを行う際に ECharts を使用しました。今日はそれをメモとして整理し、より多く...
MySQL InnoDB テーブルスペース暗号化の例の詳細な説明
序文MySQL 5.7.11 以降、MySQL は、別の表領域に格納された InnoDB テーブルの...
Linux での vi (vim) の新しい使い方のまとめ
私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...
MySQL インデックスの詳細な説明
目次1. インデックスの基本1.1 はじめに1.2 インデックスの仕組み1.3 インデックスの種類1...