W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:Z9eVrq さんの質問

レスポンシブサイトでスマホ用cssが反映されない。

現在レスポンシブサイトを作成しています。

スマホでチェックした際
スマホ用cssが反映されず、PC用cssが反映され、スマホ表示が崩れてしまいました。

応急処置としてPC用cssが反映されてしまう箇所については、
スマホ用CSSでその箇所に 「!important」を記載したので、今は表示は崩れていません。

このようにレスポンシブサイトでスマホ用cssが反映されず、PC用cssが反映されるとき皆様はどういった対応されていますか。

個人的に「!important」以外の解決策があれば知りたいと思い質問投稿させて頂きました。

設定は下記です。

■ビューポート設定■
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">

■cssの書き方■

PC用css

@media screen and (max-width: 500px) {
スマホ用CSS

宜しくお願い致します。

みんなの回答 3 件

ID:WF/DVv さんの回答

PC用をデフォルトにしないで、共通部分とPC用をきちんと明確に区別する。


  • 例で言えば
    @media screen and (min-width: 501px) {
    PC用css
    }
    とでもすれば、PC用の設定の混入に悩まされる事は無いじゃない?

ID:Z9eVrq

なるほど!!

PCも区別するという考え方ですね!

参考になりました。ありがとうございます。

ID:LoN4.A さんの回答

PC用もCSSでくくっちゃいましょう。@media only screen and (min-width: 1000px) {}とかで。

ID:Z9eVrq

やはり、皆さん PC用のcssを作られているのですね。

PC=デフォルトで良いと思っていましたが、今後はPC用もcssでくくります。

参考になりました。ありがとうございます。

ID:axOo9O さんの回答

意図しないクラスが優先されているってことは、
1.記述の順番、クラスの優先順位
 例えばメディアクエリの後に更になんかのクラスで上書きしてるとか?
2.意図したCSSが読み込まれていないなら
 クラス名の間違いとか、記述の間違い
らへんを疑うかな。
基本、
①共通のCSSを書く
②メディアクエリで上書きする
の順で記述していけば、important指定をしなくてもできます。
たぶん、メディアクエリの順番が前後してたりとかで優先順位がおかしくなってるんじゃないでしょうか。

ID:Z9eVrq

ありがとうございます。

> 例えばメディアクエリの後に更になんかのクラスで上書きしてるとか?

これは、メディアクエリ内で設定したあと、その後に
さらになにかを設定したという認識で良いですか?
↓こんな感じ

@media screen and (max-width: 500px) {
.kiji{}

.kiji{}

であれば、メディアクエリ内で設定したあと、その後には、そのクラスについては
記述してませんし、別のクラスで上書きもしていませんでした。

>①共通のCSSを書く
>②メディアクエリで上書きする

そうですよね。これまでこのやり方で問題なかったので。
今回、!importantで解決するまで正直焦りました。

>優先順位がおかしくなってるんじゃないでしょうか。

これが原因だと思います。
優先順位は、基本的にcssの書く順番に左右されますよね。

PC用のcssの次に スマホ cssだとだめなのですかね〜

ID:mBs8T0

上書きしてないなら何ででしょうね。
開発者ツールで見て両方読まれてるなら、なんで意図しない方が優先されてるかをチェックしてみると良いんじゃないでしょうか。
記述の順番だと思うのですが。。。
メディアクエリが各所にあったりすると混乱しちゃうかもね。

最終更新日:2015-07-07 (10,919 views)

関連するトピックス

ページ上部に戻る