メディアクエリ、レスポンシブデザイン上手く表示されません。 htmk css初心者です。ホームページを作っているのですが
メディアクエリ、レスポンシブデザイン上手く表示されません。 htmk css初心者です。ホームページを作っているのですが レスポンシブデザインでタブレット、とスマホ様にブレイクポイントを2つ max-width 1000pxとmax-width 750pxで2つ作っています。 一部の画面のディスプレイがスマホサイズ750px以下にもかかわらずフォントサイズがタブレット用の1000px以下の表示になってしまっています。 理由や解決策をアドバイスください。
ベストアンサー
> max-width 1000pxとmax-width 750pxで2つ max-widthで書いているのなら、モバイルファーストですね。 小さいほうから書いてます？ スマホベースの制御を書いておいて、メディアクエリで750、1000と例外を書いていく。 デスクトップファーストなら、ベースをPC用に書き、min-widthを1001、751と絞っていく。 両方がごっちゃになってるかもしれません。
ご返答ありがとうございます。 まずはpc用にhtmlとcssを作りました。 その後にレスポンシブcssのファイルを作り、スマホ用の@media(max-width:750px){}のcssを書き、同じファイルの上記の下に @media(max-width:1000px){}のcssを書きました。 順番がいけないのでしょうか？ max-width:1000pxのコードを/**/にすれば max-width:750pxの方が表示されるのですが・・・ 両方がonだと一部ずっとタブレット用のｃｓｓのままです。 一応レスポンシブcssのファイルをストレージしたものを貼っておきます。
質問者からのお礼コメント
みなさまのおかげで解決しました。 書いていく順番が原因で、コピペで位置を変えればすんなり解決いたしました。ありがとうございました！
お礼日時：2020/11/8 18:00
