2016-04-03 6 views
0

screenshot from chrome inspect element メディアクエリここ

がChromeからのスクリーンショットであるあなたは、小さなクエリが削除されたかを確認することができ検査:

+0

これを引き起こしている要因はたくさんありますが、あなたの質問には多くの詳細は記載されていません。何よりもまず、メディアクエリを実行するには画面が414px以下でなければなりません。そうでなければ、あなたの質問にもっと情報を入れてください。 –

+0

@Michael_Bもちろん、画面が414以下であり、クロムが414のクエリを表示しないことに感謝します。何を追加する必要がありますか? – alonblack

+0

レイアウトに影響を与えるすべてのCSSを投稿します。可能であれば、問題を再現するデモ(例:jsfiddle.net)またはライブサイトへのリンクも投稿してください。 –

答えて

2

CSS @mediaは、このようにあなたの2つのスタイルをdon't affect the specificity of selectors.を問い合わせます(それらの実際のセレクタは同一であるので)同じ特異性を持つので、the last one winsです。特に

、CSSの標準はと言う:ホストの言語によって決定された彼らは、順番をリンクに連結されているかのように独立して元の文書によってリンクされたスタイルシートから

宣言が処理されます。

つまり、ページで複数のスタイルシートを使用すると、HTMLコードの最後に表示されるスタイルシートが優先されます。

あなたの2つのスタイルが異なるスタイルシートのものであるとすれば、newDesignSprites.cssはHTML内にsmartphone.cssの後に来て、上書きされてしまいます。 <link>要素の順序を入れ替えるだけで問題を解決できます。

+0

もう1つのオプションは、メディアクエリ内で使用されているセレクタに、より細かな機能を追加することです。または、他のすべてが失敗した場合は、プロパティに '!important'を追加します。 – Garconis

+0

ありがとう@ilmari karonen – alonblack

関連する問題