メディアクエリ、レスポンシブデザイン上手く表示されません。 htmk css初心者です。ホームページを作っているのですが

HTML、CSS | ホームページ作成37閲覧xmlns="http://www.w3.org/2000/svg">50

ベストアンサー

0

ご返答ありがとうございます。 まずはpc用にhtmlとcssを作りました。 その後にレスポンシブcssのファイルを作り、スマホ用の@media(max-width:750px){}のcssを書き、同じファイルの上記の下に @media(max-width:1000px){}のcssを書きました。 順番がいけないのでしょうか? max-width:1000pxのコードを/**/にすれば max-width:750pxの方が表示されるのですが・・・ 両方がonだと一部ずっとタブレット用のcssのままです。 一応レスポンシブcssのファイルをストレージしたものを貼っておきます。

ThanksImg質問者からのお礼コメント

みなさまのおかげで解決しました。 書いていく順番が原因で、コピペで位置を変えればすんなり解決いたしました。ありがとうございました!

お礼日時:2020/11/8 18:00

その他の回答(2件)

0

Bootstrap というレスポンシブ対応の CSSフレームワークでは、スマホサイズの解像度を 576px をブレークポイントにしてますね。 https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints ついこの間までは 480px だったのですが ver4.5 から少し解像度を上げたようです。 Bootstrap を採用しているテンプレートのほとんどは 480px ですね。 上記 URL のように CSS に、 @media (min-width: 576px) { ここにスマホ用CSS } と書けば適用されるはずです。 それ以前に、headタグ内に、 <meta name="viewport" content="width=device-width, initial-scale=1"> の1行がないと、メディアクエリが有効になりませんのでご注意を。

ご回答、ありがとうございます。headタグ内のviwportは設定しております。 まずpc用にhtmlとcssを作りました。 その後にスマホ用の@media(max-width:750px){}を書き、同じファイルの上記の下に @media(max-width:1000px){}のcssを書きました。 max-width:1000pxのコードを/**/にすれば max-width:750pxの方が表示されるのですが・・・

0

メディアクエリのソースは どうなってますか?、投稿してみて下さい。

それは それとして、「スマホ、タブレット、PC」を分けたいなら、メディアクエリでは無理です(ネットの記事を鵜呑みにしてはダメ)。 JavaScriptで判定して下さい。 「スマホ、タブレット」の場合、端末の物理的な解像度と、ブラウザ上の解像度は違うようで、ブラウザ上の解像度を"CSSピクセル"と言うらしいです。 OS・Android端末のCSSピクセル・dp解像度一覧 https://wemo.tech/1496 参考 Webページにおける基本的な注意点 http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+00000231&tsn+00000231&bts+2019/08/12%2011%3A02%3A18&