CSSでレスポンシブ対応
PSとSPで画面のデザインを変えたい場合、CSSで対応することはよくあると思います。
定番の対応法として、画面サイズ毎に適応するCSSを変えると思いますが、単純に切り替えただけだとうまくいかなかったので、忘備録も兼ねてまとめておきます。
この記事を読んで分かること
・スマホで@mediaを使って切り替えが、うまく反映されない時の対処法
不十分なパターン
こんな感じで画面サイズ毎に@mediaで適応するCSSを切り替えられます。という情報はよく出てきますが、これだけだとスマホで正しい挙動にならない場合があります。
@media screen and (max-width: 550px) {
/* 画面サイズが550pcまで 大体のスマホに対応 */
}
@media screen and (min-width:550px) {
/* 画面サイズ550px以上 大体のタブレットに対応 */
}
@media screen and (min-width: 1000px){
/* 画面サイズ1000px以上 大型タブレットや横画面に対応 */
}スマホ画面サイズが正しく適用されていないことが原因で、正しく適用されてあげれば良いわけです。
解決策
<head>内にこれを入れたらうまくいきます。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">metaでviewportの設定を入れてあげると、スマホでも正しい画面サイズが適応され、@mediaでCSSを切り替えられるようになります。
簡単なことですが、意外と書かれていないことが多いので、スマホでなぜかCSSの切り替えがうまくいかないという人は、試してみてください。
プログラミングを効率的に学ぶには、Udemyがオススメです。
Udemyは、世界最大の教育プラットフォームで、動画でスキルを学ぶことができます。
【セール95%OFF】オンライン学習ならUdemyがオススメ【プログラミング・ビジネススキル】
オンライン学習ならUdemyが一番オススメです。その理由を徹底解説します。プログラミングやビジネススキル、YouTube、ブログなど副業で稼ぎたい人もUdemyならオンラインで挫折せずスキルを身に付けられます。
1-lifengine.com
2021.08.10
Webサービス・スマホアプリ・ゲーム開発に役立つプログラミングスキルはもちろん、ブログやYouTubeで稼ぐために必要な集客・ブランディングなどを学ぶことができます。
セール期間中は、95%OFFになったり、30日間の全額返金保証もついているので、お得に安心して利用できます。
コメント