CSS(em)について CSSにある.navと.m-sectionに書かれているwidthを %ではなくemにしたいのでそれぞれ0.4emと0.6emに したところ潰れてしまいました。

HTML、CSS45閲覧xmlns="http://www.w3.org/2000/svg">25

ベストアンサー

0

Chromeのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみればユーザー・フレンドリーが如何に重要か解るでしょう。 (各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。

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

お三方ともありがとうございました! 直りました!

お礼日時:2021/12/3 18:50

その他の回答(2件)

0

980px の 40% と 60% は 392px と 588px ですが、それが 0.4em や 0.6em でないことは確かです。1em は文字1つ分の大きさです。潰れるのは当然だと思います。 問題は 392px と 588px が何 em なのかですが、ブラウザのデフォルトでは 1em = 16px らしいので、計算しましょう。 それから、既に回答が出ているとおり、display: flex が指定されていないセレクタに justify-content プロパティが指定されるのはおかしいと思います。

0

pop********さん >・・・・どうすればem表記で正常に動きますか?・・・・・・・・ そもそも、何をしたいのか分かりませんが。 取り敢えず、ご参考に↓ https://www.tohoho-web.com/css/value/length.htm https://creive.me/archives/15427/#Flex <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } header { background-color: #98fb98; height: 200px; } .wrapper { width: 980px; /* justify-content: center; 削除 */ margin-left: auto; margin-right: auto; } .wrapper2 { display: flex; justify-content: center; /* 追加 */ width: 100%; } .nav { width: 0.4em; /* 変更 */ background-color: tomato; height: 200px; } .m-section { width: 0.6em; /* 変更 */ background-color: violet; height: 200px; } </style> </head> <body> <div class="wrapper"> <header></header> <div class="wrapper2"> <div class="nav"></div> <div class="m-section"></div> </div> </div> </body> </html>