简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Web でのメディア クエリの方法

一个新手
リリース： 2017-10-05 15:32:50
オリジナル
1809 人が閲覧しました

配置レイアウト

メディアクエリのコード: 

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .a {
    border: 1px solid #000000;
    width: 100px;
    height: 100px;
    background-color: #000000;
}
@media only screen and (min-width: 300px) and (max-width: 640px) {
    .a {
    background-color: red;
}
} @media only screen and (min-width: 700px) {
    .a {
    background-color: green;
}
} @media only screen and (max-width:200px ) {
    .a {
    background-color: blue;
}
} </style> </head> <body> <p class="a"></p> </body></html>
ログイン後にコピー

以上がWeb でのメディア クエリの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
web 方法 お問い合わせ
ソース：php.cn
前の記事：JSのMD5暗号化方式 次の記事：Reduxを理解する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
透過的なブラウザを起動して、Web アプリケーションと PWA のエクスペリエンスを向上させます [静的 HTML、CSS、JavaScript をサポート] [ユーザーが Web アプリケーション/PWA でデスクトップの壁紙を表示できるようにします] 私は現在、ソケットを使用した Web アプリケーション (チャット) を開発しているジュニアのフロントエンド開発者兼デザイナーです。私と友人が使用している言語は、Scala、HTM...
から 2024-04-05 13:50:12
0
1
1367
Web ページのサイズを変更するとブートストラップ スイッチが正しく動作しない これはコードです: <navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"clas...
から 2024-04-05 08:45:39
0
1
3443
Web サイトのページでローカルにインストールされたライブラリを使用する Windows オペレーティング システム用に作成され、最新のブラウザーの system32 に登録されたライブラリ (.dll、.ocx) を使用して、サイトの作業と計算のロジッ...
から 2024-04-05 00:15:49
0
1
3563
特定のクリック イベントをリッスンし、他のクリック イベントを抑制するにはどうすればよいですか? 私の Web アプリケーションには、各行が特定の URL にリンクする HTML テーブルが含まれています: <table><trdata-url="h...
から 2024-04-04 16:55:27
0
1
317
JavaScript - Mocha Chai 単体テストが実行されない 私はフロントエンド Web 開発コースのブートキャンプでプロジェクトに取り組んでいますが、残念ながら教授は私のこの質問に答えることができません。 2 人のプレイヤーが参加し、26 ...
から 2024-04-02 14:52:19
0
1
356
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！