web-dev-qa-db-ja.com

Chrome開発者ツールにCSSメディアクエリを入力してください

F12を押すと、Chromeの要素のCSSを即座に変更できます。ただし、@ media画面と（max-width）を次のように入力することはできません。

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Enterキーを押すと、単に消えます。メディアクエリを動的に追加および削除するにはどうすればよいですか？

enter image description here

cssmedia-queriesgoogle-chrome-devtools
25
user1506145

インスペクターで特定の要素のスタイルを編集すると、要素のインラインstyle属性を編集しているかのようになります。例では、color: redなどのプロパティ宣言のみを配置できます。これは、要素のスタイルを編集するときにDOM視覚化自体にも反映されます。メディアクエリはインラインスタイルに属しません。適切なスタイルシートにのみ表示される@mediaルールに属します。

Chromeでは、メディアクエリを含めるためにインスペクタースタイルシートを直接編集する必要があります。 [ソース]パネルに移動し、インスペクタースタイルシートを選択することでアクセスできます。

これにはCSSの記述が含まれるため、要素を選択する必要があります。 （通常）要素パネルで右クリックして[CSSパスのコピー]を選択すると、選択した要素の一意のCSSセレクターを取得できます。

次に、CSSを作成します。

@media screen and (max-width: 300px) {
    /* selector for your element */ { color: red; }
}
37
BoltClock

Headセクションのスタイルタグ内にいつでもCSSを追加できます。 HTMLを右クリックしてHTMLを編集し、「HTMLとして編集」を選択します。例えば、

<style>
    @media screen and (min-width: 0px) and (max-width: 400px) {
        body {
            background-color: red;
        }
    }
    @media screen and (min-width: 401px) and (max-width: 599px) {
        body {
            background-color: green;
        }
    }
    @media screen and (min-width: 600px) {
        body {
            background-color: blue;
        }
    }
</style>
6
Choonkies

New Style Ruleを使用できます。 .cls以外のプラス記号（+）をクリックします。

enter image description here

すると、新しいクラスが生成されます。 inspector-stylesheetをクリックします。

enter image description here

ほとんど空白のスタイルシートで[ソース]タブにリダイレクトされます。これで、メディアクエリをそこに配置できます。

enter image description here

6
Daryl Malibiran

私は同じ問題を抱えていて、最終的に、例えば私が入ってきたとき、

@media (max-width: 767px)
.col-sm-3 {
  width: 75%;
}

私の画面サイズは実際には767px以上でした。だからエンターキーを押すと、消えて機能しなくなったようだ。しかし、ブラウザの画面サイズを768px未満に調整すると、スタイルでメディアクエリが表示されることに気付きました。

0
rmsimpsonau